为什么父组件向子组件发送消息时，子组件充耳不闻？

2023-12-15 16:30:17

揭秘父组件向子组件通信时，子组件毫无响应之谜 ##

在 Vue 的世界里，组件间的通信是至关重要的。父组件希望子组件执行某些动作或获取数据时，便会通过事件总线发送消息。然而，有时会出现这样一个令人困惑的现象：父组件发布的事件石沉大海，子组件对此充耳不闻，毫无响应。本文将为您揭开这个谜团，并提供切实可行的解决方案。

父组件与子组件间的通信方式：事件总线

事件总线是一种在 Vue 中实现组件间通信的常用方式。它允许组件之间传递自定义事件，从而实现数据的双向流通。父组件可以发布事件，子组件可以订阅这些事件并做出相应的处理。

问题所在：父组件发布事件时，子组件尚未订阅

在 Vue 中，组件的生命周期钩子决定了组件的创建、挂载、更新和销毁的顺序。问题就出在父组件发布事件的时机和子组件订阅事件的时机上。

父组件通常在 created 生命周期钩子中发布事件。而子组件则在 mounted 生命周期钩子中订阅事件。这意味着，当父组件发布事件时，子组件可能尚未创建或尚未挂载，自然也就无法接收和处理事件。

解决方案：等待子组件挂载完成后再发布事件

为了解决这个问题，我们需要确保父组件在发布事件之前，子组件已经挂载完成。有两种方法可以实现这一点：

使用 nextTick 方法： nextTick 方法可以将回调函数推迟到下一次 DOM 更新循环后执行。这样，就可以确保子组件已经挂载完成，再发布事件。
**使用 nextTick 方法：** nextTick 方法是组件实例的私有方法，也可以将回调函数推迟到下一次 DOM 更新循环后执行。同样，这可以确保子组件已经挂载完成，再发布事件。

代码示例

使用 nextTick 方法：

// 父组件
export default {
  created() {
    this.$nextTick(() => {
      this.$bus.$emit('my-event')
    })
  }
}

// 子组件
export default {
  mounted() {
    this.$bus.$on('my-event', () => {
      console.log('子组件收到事件')
    })
  }
}

使用 $nextTick 方法：

// 父组件
export default {
  created() {
    this.$bus.$emit('my-event')
  }
}

// 子组件
export default {
  mounted() {
    this.$nextTick(() => {
      this.$bus.$on('my-event', () => {
        console.log('子组件收到事件')
      })
    })
  }
}