vue 监听子组件销毁

在Vue中，可以使用`$destroy`方法来监听子组件的销毁。当子组件被销毁时，可以在父组件中调用`$destroy`方法来捕获子组件的销毁事件。

首先，在子组件中定义一个`beforeDestroy`生命周期钩子函数。这个钩子函数会在组件销毁之前被调用。在这个钩子函数中，可以通过`$emit`方法来触发一个自定义事件，表示子组件即将被销毁。

<template>
  <div>
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    this.$emit('destroy')
  }
}
</script>

接着，在父组件中，可以使用`v-on`指令来监听子组件触发的自定义事件，并在事件回调函数中执行相应的操作。

<template>
  <div>
    <child-component @destroy="onChildDestroy"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    onChildDestroy() {
      // 在子组件销毁时执行的逻辑
      console.log('子组件已销毁')
    }
  }
}
</script>

这样，当子组件被销毁时，父组件中的`onChildDestroy`方法就会被调用，从而实现了对子组件销毁的监听。