vue $dispatch 和 $broadcast 详解

在vue 1.0 中,$dispatch 和 $broadcast作为一对情侣属性，主要用来实现基于组件树结构的事件通信。

$dispatch解析
dispatch是一个事件，首先会在自己实例本身上触发，然后沿父链向上传播。当它触发父组件上的事件侦听器时，传播会停止，除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。
dispatch接收两种参数：event 事件名称，[…args]触发事件时传递给回调函数的参数。
实例：

在这里插入代码片
// 创建一个 parent 组件
var parent = new Vue();

// 创建一个 child1 组件，其父组件指向 parent
var child1 = new Vue({ parent: parent });

// 创建一个 child2 组件，其父组件指向 child1
var child2 = new Vue({ parent: child1 });

// 在 parent 组件监听名为 test 的事件，并绑定了一个回调函数
parent.$on('test', function () {
  console.log('parent notified');
});

// 在 child1 组件监听名为 test 的事件，并绑定了一个回调函数
child1.$on('test', function () {
  console.log('child1 notified');
});

// 在 child2 组件监听名为 test 的事件，并绑定了一个回调函数
child2.$on('test', function () {
  console.log('child2 notified');
});
// 在 child2 组件中通过 dispatch 触发 test 事件
child2.$dispatch('test');

// 事件执行会输出如下结果
// -> "child2 notified"
// -> "child1 notified"

parent、child1 和 child2 三个组件之间的关系可以展示成如下的关系图

在这里插入图片描述

$broadcast解析
broadcast 是一个事件，它向下传播到当前实例的所有后代。由于后代扩展为多个子树，事件传播将会遵循许多不同的“路径”。除非回调返回 true，否则在沿该路径触发侦听器回调时，每个路径的传播将会停止。
broadcast 会接收两中参数：event 是事件名称，[…args] 是触发事件时传递给回调函数的参数。
实例：

// 创建 parent 组件实例
var parent = new Vue()

// 创建 child1 组件实例，其父组件指向 parent
var child1 = new Vue({ parent: parent })

// 创建 child2 组件实例，其父组件指向 parent
var child2 = new Vue({ parent: parent })

// 创建 child3 组件实例，其父组件指向 child2
var child3 = new Vue({ parent: child2 })

// 在 child1 组件监听名为 test 的事件，并绑定了一个回调函数
child1.$on('test', function () {
  console.log('child1 notified')
})

// 在 child2 组件监听名为 test 的事件，并绑定了一个回调函数
child2.$on('test', function () {
  console.log('child2 notified')
})

// 在 child3 组件监听名为 test 的事件，并绑定了一个回调函数
child3.$on('test', function () {
  console.log('child3 notified')
})
parent.$broadcast('test')
// -> "child1 notified"
// -> "child2 notified"

parent、child1、child2 和 child3 四个组件之间的关系可以展示成如下的关系图：
在这里插入图片描述
以上是$dispatch 和 $broadcast在1.0中的详解。但是在vue2.0中，这两个属性已废弃。那么，对应的事件，由下向上，由上往下传递，如何解决？
官方文档：

vue $dispatch 和 $broadcast 详解

猜你喜欢