Comp2.uvue

<template>
  <view class="mt-10" ref="mixin-comp-root">
    <text class="bold">Comp2: inheritAttrs: true</text>
    <text class="mt-10" style="color:#ccc;">rootElementTitle should not be null</text >
    <text class="mt-10 root-element-title-2"
      >rootElementTitle: {{ rootElementTitle }}</text
    >
    <text class="mt-10">{{ namesakeMixinProp }}</text>
    <text class="mt-10">{{ namesakeMixinDataMsg }}</text>
    <text class="mt-10">{{ namesakeMixinComputed }}</text>
    <text class="mt-10 mixin-watch-msg">{{ mixinWatchMsg }}</text>
    <text class="mt-10">{{ namesakeMixinMethod() }}</text>
    <button class="mt-10" @click="changeGlobalMixinOnloadMsg1">
      change globalMixinOnloadMsg1
    </button>
    <MixinComp />
  </view>
</template>

<script lang="uts">
import CompForComp from './CompForComp.uvue'

export default {
  mixins:[{
    inheritAttrs: true,
  }],
  components: {MixinComp: CompForComp},
  props: {
    namesakeMixinProp: {
      type: String,
      default: '组件内部的同名 props'
    }
  },
  data(){
    return {
      namesakeMixinDataMsg: '组件内部的同名 data',
      mixinWatchMsg: '',
      rootElementTitle: '' as string | null
    }
  },
  computed: {
    namesakeMixinComputed(): string {
      const res = '组件内部的同名 computed'
      console.log(res)
      return res
    }
  },
  mounted(){
    const rootElement = this.$refs['mixin-comp-root'] as UniElement
    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))
  },
  watch: {
    globalMixinOnloadMsg1(newVal: string) {
      this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
      console.log(this.mixinWatchMsg)
    },
  },
  methods: {
    namesakeMixinMethod(): string {
      const res = '组件内部的同名 method'
      console.log(res)
      return res
    },
    changeGlobalMixinOnloadMsg1(){
      this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'
    }
  }
}
</script>