Vue学习:非父子组件通信

官方的说明:
有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

1
2
3
4
5
6
7
8
9
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})

在复杂的情况下,我们应该考虑使用专门的状态管理模式.

中央事件总线的实现具体Demo:

0%