感受Vue最棒的用法之一，从子组件中唤醒父组件

2023-12-16 17:00:50

在 Vue 中监听第三方组件的生命周期：一个便捷技巧

在 Vue.js 开发中，我们经常需要在父组件中了解子组件的生命周期状态。例如，当子组件被创建、挂载、更新或卸载时。然而，Vue.js 本身并不提供直接访问子组件生命周期钩子的方式。

为了解决这一挑战，我们可以借助事件监听函数。本文将深入探讨如何使用事件监听函数监听第三方组件的生命周期钩子，并阐明其实际应用。

使用事件监听函数

要监听子组件的生命周期钩子，我们可以使用 $on() 方法。此方法允许我们在组件上监听一个事件，并在事件发生时执行一个回调函数。

子组件：

export default {
  created() {
    // 触发 created 事件
    this.$emit('created');
  },
  mounted() {
    // 触发 mounted 事件
    this.$emit('mounted');
  },
  updated() {
    // 触发 updated 事件
    this.$emit('updated');
  },
  beforeDestroy() {
    // 触发 destroyed 事件
    this.$emit('destroyed');
  }
};

父组件：

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      // 在子组件被创建时，打印一条消息
      createdMessage: '',
      // 在子组件被挂载时，打印一条消息
      mountedMessage: '',
      // 在子组件被更新时，打印一条消息
      updatedMessage: '',
      // 在子组件被卸载时，打印一条消息
      destroyedMessage: ''
    };
  },
  mounted() {
    // 在子组件被创建时触发 created 事件
    this.$refs.child.$on('created', () => {
      this.createdMessage = '子组件已创建';
    });

    // 在子组件被挂载时触发 mounted 事件
    this.$refs.child.$on('mounted', () => {
      this.mountedMessage = '子组件已挂载';
    });

    // 在子组件被更新时触发 updated 事件
    this.$refs.child.$on('updated', () => {
      this.updatedMessage = '子组件已更新';
    });

    // 在子组件被卸载时触发 destroyed 事件
    this.$refs.child.$on('destroyed', () => {
      this.destroyedMessage = '子组件已卸载';
    });
  }
};