父组件

<!-- 首页 -->
<template>
  <div style="border: 5px solid gray">
    <div>父组件：</div>
    <div>{{ msg }}</div>
    <div>{{ count11 }}</div>
    <div>count: {{ count }}</div>
    <div>double-count: {{ doubleCount }}</div>
    <div>{{ username }}</div>
    <div>{{ userInfo }}</div>

    <button @click="multCountFun(3)">标签传值</button>
    <div @click="changeMsgFun">修改定义的数据</div>
    <!-- 父组件调用子组件方法 -->
    <div>
      <button @click="getChildFun">父组件调用子组件方法</button>
    </div>

    <!-- 组件 -->
    <child
      :count="count"
      :msg="msg"
      @multCountFun="multCountFun"
      @changeMsg="changeMsg"
      ref="childRef"
    />
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  one rrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  reactive,
  computed,
  watch,
  ref,
  defineComponent,
} from "vue";
import child from "./child.vue";
export default {
  components: { child },
  setup() {
    const childRef = ref(null);
    /* ------------------------------定义data ------------------------------*/
    let teststr = ref("阳光正好");
    const data = reactive({
      msg: "Hello World",
      count: 1,
      name: "name",
      username: ref("username"),
    });

    /* ------------------------------处理生命周期 ------------------------------*/
    onMounted(() => {
      console.log("组件初始化Mounted");
      console.log('组件初始化Mounted',childRef.value)
    });
    onBeforeMount(() => {
      console.log("初始化前onBeforeMount");
    });
    onBeforeUpdate(() => {
      console.log("更新前onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("更新后onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("卸载前onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("卸载后onUnmounted");
    });
    onActivated(() => {
      console.log("包裹组建被激活onActivated");
    });
    onDeactivated(() => {
      console.log("包裹组件停止使用onDeactivated");
    });
    one rrorCaptured(() => {
      console.log("子孙组件的异常onErrorCaptured");
    });
    onRenderTracked(() => {
      // console.log("跟踪-官方说是用来调试使用的onRenderTracked");
    });
    onRenderTriggered(() => {
      // console.log("触发-官方说是用来调试使用的onRenderTriggered");
    });

    /* ------------------------------处理computed ------------------------------*/
    const computeds = {
      doubleCount: computed(() => data.count * 2),
      userInfo: computed(() => `username:${data.username}`),
    };

    /* ------------------------------处理watch------------------------------ */
    // json方式的监听-reactive
    watch(
      () => data.count,
      () => {
        console.log(`data.count变化了`);
      }
    );
    // 变量方式的监听-ref
    watch(teststr, () => {
      console.log(`teststr变化了`);
    });

    /* ------------------------------定义methods ---------------------------------*/
    const methods = {
      multCountFun: function (n) {
        data.count = data.count * n;
      },
      changeMsgFun: (getmsg) => {
        data.msg = "今天天气很好";
        console.log("子组件传递的值", getmsg);
      },
      // 获取调用子组件方法
      getChildFun:()=>{
         childRef.value.getListFun();
      }
    };
    setTimeout(() => {
      data.username += "1";
    }, 3000);

    /* ------------------------------返回数据------------------------------ */
    return Object.assign(data, computeds, methods,{childRef});
  },
};
</script>

子组件

<!-- child -->
<template>
  <div style="border:2px solid blue">
      <div>子组件：</div>
      <div>{{props.count}}</div>
      <div>{{props.msg}}</div>
      <div><button @click="$emit('multCountFun',222)">修改父组件数据</button></div>
      <button @click="changeFun">子组件调用父组件方法</button>
  </div>
</template>

<script>
import {watchEffect,defineComponent} from 'vue';
export default {
  props: ['msg','count','multCountFun','changeMsg'],
  setup(props, context) {
    console.log('props 获取组建中定义的props',props); // 在这里可以获取父组件传过来的属性值
    console.log('context这里包含定义的事件，和一些没有被声明的属性参数',context); // 在这里可以获取父组件传过来的属性值
    watchEffect(() => {
      // 利用watchEffect监听props
      console.log('watchEffect监听',props.msg); // 首次以及props改变才会执行这里的代码,可监听父组件的传值
    });
    /* ------------------------------定义methods ---------------------------------*/
    const methods = {
      changeFun:()=>{
        context.emit('changeMsg','挺好')
        context.emit('multCountFun','555')
      },
      // 父组件调用方法
      getListFun:()=>{
        console.log('子组件方法执行')
        alert('子组件')
      },
    };
    return Object.assign(methods,{props});
  },
};
</script>