Vue中的情侣属性$dispatch和$broadcast详解-创新互联

00 前言

$dispatch 和 $broadcast 作为一对情侣 💑属性，在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 —— 通过向上或向下以冒泡的形式传递事件流，以实现嵌套父子组件的通信。但是由于其显功能缺陷，在 Vue 2.0 中就被移除了。虽然 Vue 官网已经不再支持使用 $dispatch 和 $broadcast 进行组件通信，但是在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 等等。

那么 $dispatch 和 $broadcast 到底是怎么工作，其底层又是怎么实现的呢？接下来，我们就详细的说一说！

01 $dispatch 详解

为了追根溯源，我们还是先去 Vue 1.0 的文档你观摩一下其概念吧！

概念：

Dispatch an event, first triggering it on the instance itself, and then propagates upward along the parent chain. The propagation stops when it triggers a parent event listener, unless that listener returns true. Any additional arguments will be passed into the listener's callback function.

上面的一段英文定义来自 Vue 1.0 官方文档，其大致的意思是说：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');
});