标签：count console computed ------------------------------ watch props 组件 log

 父组件

<!-- 首页 -->
<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>

标签：count,console,computed,------------------------------,watch,props,组件,log
来源： https://blog.csdn.net/QQ_Empire/article/details/121470061

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。