vue使用hook:声明周期来监听子组件的声明周期

在子组件本身自我监听/内部监听生命周期函数：

<template >
  <div class="container">
    我是子组件 ：{
  {num}}
    <button @click="changeFun">chhange按钮</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1
    };
  },
  methods: {
    changeFun() {
      this.num += 10;
      console.log("changeFun ->  this.num", this.num);
    }
  },
  mounted() {
    window.addEventListener("resize", this.changeFun);
    this.$once("hook:beforeDestroy", () => {
      console.log(123);
      window.removeEventListener("resize", this.changeFun);
    });
  }
};
</script>
<style  scoped>
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

hook:beforeDestroy

就是在beforeDestroy声明周期中想执行的操作，不需要再写一遍声明周期钩子，this.$once是vue自带的一个函数api，表示该事件只执行一次。

在父组件监听子组件声明周期，类似自定义方法/外部监听生命周期函数：

<template >
  <div class="container">
    <v-c @hook:updated="change"></v-c>
  </div>
</template>
<script>
import vC from "./zjqChildd";
export default {
  components: { vC },
  data() {
    return {
      show: true
    };
  },
  methods: {
    change() {
      console.log("子组件的updated钩子函数被触发");
    }
  },
};
</script>
<style  scoped>
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

@hook:updated=“change”

监听子组件更新钩子，页面数据发生变化执行父组件的change函数。

参考：https://blog.csdn.net/wangxueran/article/details/119213108