vue3中如何监听子组件或子节点的生命周期

前言：

        在工作中，可能会遇到一些需要监听到子组件或字节的生命周期，就比如我们在显示隐藏子组件时要去操作一些事情，其实这个需求并不复杂，我也就不卖关子了，长话短说，直接开始。

1.监听子组件的生命周期

        创建父组件和组件。

        父组件App.vue：

<template>
  <div class="app">
    <button @click="handleClick">点击</button>
    <HelloWorld v-if="isBox" ></HelloWorld>
  </div>
</template>

<script setup>
import { ref } from "vue";
import HelloWorld from './components/HelloWorld.vue'
const isBox = ref(true)

function handleClick() {
  isBox.value = !isBox.value
}
</script>

<style scoped>
</style>

        子组件HelloWorld.vue：

<template>
  <div class="sun">
    <div class="sun_box"></div>
  </div>
</template>

<style scoped>
.sun_box{
  width: 200px;
  height: 200px;
  background-color: aquamarine;
}
</style>

        这个例子非常简单，就是点击按钮将子组件显示和隐藏，我们现在需要监听到子组件的生命周期在vue3中可以使用到@vue:生命周期="事件名"，就比方说我要监听到子组件的挂载和卸载，在父组件中的子组件标签上添加@vue:mounted="事件名"（挂载）和@vue:unmounted = "事件名"，现在我在我的例子加上该方法。

父组件：

<template>
  <div class="app">
    <button @click="handleClick">点击</button>
    <HelloWorld v-if="isBox" @vue:mounted="handleMounted" @vue:unmounted = "handleUnMounted"></HelloWorld>
  </div>
</template>

<script setup>
import { ref } from "vue";
import HelloWorld from './components/HelloWorld.vue'
const isBox = ref(true)

function handleClick() {
  isBox.value = !isBox.value
}

function handleMounted(){
  console.log('子节点被挂载完成');
}

function handleUnMounted(){
  console.log('子节点被卸载完成');
  
}
</script>

<style scoped></style>

浏览器效果：

        我这样操作的话成功监听到了子组件的生命周期了，点击按钮，子组件隐藏提示卸载完整，显示则挂载完成。

2.监听子节点的生命周期

        监听子节点和监听子组件的生命周期的方式是一样的，就是将套在子组件上的方法套给子元素即可。

<template>
  <div class="app">
    <button @click="handleClick">点击</button>
    <div class="app_box" v-if="isBox" @vue:mounted="handleMounted" @vue:unmounted = "handleUnMounted"></div>
    <!-- <HelloWorld v-if="isBox" @vue:mounted="handleMounted" @vue:unmounted = "handleUnMounted"></HelloWorld> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
// import HelloWorld from './components/HelloWorld.vue'
const isBox = ref(true)

function handleClick() {
  isBox.value = !isBox.value
}

function handleMounted(){
  console.log('子节点被挂载完成');
}

function handleUnMounted(){
  console.log('子节点被卸载完成');
  
}
</script>

<style scoped>
.app_box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
</style>

结语：

        大晚上的睡不着刷dy看到了这样的监听子组件和子节点的方式，觉得非常有用，就自己写了一个小例子分享给大家，如果觉得有用请给我点个免费的赞。

        对了，还有一点，这是vue3中监听子组件和子节点的方法，在vue2中将@vue改为@hook，希望这篇博客能给你带来帮助。