Vue兄弟组件之间的通信(EventBus)

在开发中,不可避免的要碰到需要兄弟组件之间相互通信的地方,在Vue的1.0版本中,我曾经采取的方式是通过两个兄弟组件的共同父级进行通信。主要用到$dispatch和$broadcast这两个方法。但在如今的2.0版本中 ,这两个方法已经废弃,而且在我看来依靠这种方式来实现本身也不够优雅。
所幸2.0版本中为我们提供了新的实现方式。下面就来简单介绍下这种方式,即EventBus


var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})
其实就是两个组件共享一个Vue的实例,其中一个组件触发事件,另一个组件监听事件后触发回调函数。

你可能感兴趣的:(前端)