Vue.js 1.x 的 $dispatch 与 $broadcast
虽然 Vue.js 1.x 已经成为过去时,但为了充分理解本节通信方法的使用场景,还是有必要来了解一点它的历史。
在 Vue.js 1.x 中,提供了两个方法:`$dispatch` 和 `$broadcast` ,前者用于向上级派发事件,只要是它的父级(一级或多级以上),都可以在组件内通过 `$on` (或 events,2.x 已废弃)监听到,后者相反,是由上级向下级广播事件的。
来看一个简单的示例:
<!-- 注意:该示例为 Vue.js 1.x 版本 -->
<!-- 子组件 -->
<template>
<button @click="handleDispatch">派发事件</button>
</template>
<script>
export default {
methods: {
handleDispatch () {
this.$dispatch('test', 'Hello, Vue.js');
}
}
}
</script>
<!-- 父组件,部分代码省略 -->
<template>
<child-component></child-component>
</template>
<script>
export default {
mounted () {
this.$on('test', (text) => {
console.log(text); // Hello, Vue.js
});
}
}
</script>
$broadcast 与$dispatch类似,只不过方向相反。这两种方法一旦发出事件后,任何组件都是可以接收到的,就近原则,而且会在第一次接收到后停止冒泡,除非返回 true。
这两个方法虽然看起来很好用,但是在 Vue.js 2.x 中都废弃了,官方给出的解释是:
因为基于组件树结构的事件流方式有时让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。
虽然在业务开发中,它没有 Vuex 这样专门管理状态的插件清晰好用,但对独立组件(库)的开发,绝对是福音。因为独立组件一般层级并不会很复杂,并且剥离了业务,不会变的难以维护。
知道了 $dispatch和 $broadcast 的前世今生,接下来我们就在 Vue.js 2.x 中自行实现这两个方法。
自行实现 dispatch 和 broadcast 方法
自行实现的 dispatch 和 broadcast 方法,不能保证跟 Vue.js 1.x 的 $dispatch 和 $broadcast 具有完全相同的体验,但基本功能是一样的,都是解决父子组件(含跨级)间的通信问题。
通过目前已知的信息,我们要实现的 dispatch 和 broadcast 方法,将具有以下功能:
1.在子组件调用 dispatch 方法,向上级指定的组件实例(最近的)上触发自定义事件,并传递数据,且该上级组件已预先通过 `$on` 监听了这个事件;
2.相反,在父组件调用 broadcast 方法,向下级指定的组件实例(最近的)上触发自定义事件,并传递数据,且该下级组件已预先通过 `$on` 监听了这个事件。
实现这对方法的关键点在于,如何正确地向上或向下找到对应的组件实例,并在它上面触发方法。在设计一个新功能(features)时,可以先确定这个功能的 API 是什么,也就是说方法名、参数、使用样例,确定好 API,再来写具体的代码。
因为 Vue.js 内置的方法,才是以 `$` 开头的,比如 `$nextTick`、`$emit` 等,为了避免不必要的冲突并遵循规范,这里的 dispatch 和 broadcast 方法名前不加 `$`。并且该方法可能在很多组件中都会使用,复用起见,我们封装在混合(mixins)里。那它的使用样例可能是这样的:
// 部分代码省略
import Emitter from'../mixins/emitter.js'
export default {
mixins: [ Emitter ],
methods: {
handleDispatch () {
this.dispatch(); // ①
},
handleBroadcast () {
this.broadcast(); // ②
}
}
}
上例中行 ① 和行 ② 的两个方法都是在导入的混合 emitter.js 中定义的,这个稍后我们再讲,先来分析这两个方法应该传入什么参数。一般来说,为了跟 Vue.js 1.x 的方法一致,第一个参数应当是自定义事件名,比如 “test”,第二个参数是传递的数据,比如 “Hello, Vue.js”,但在这里,有什么问题呢?只通过这两个参数,我们没办法知道要在哪个组件上触发事件,因为自行实现的这对方法,与 Vue.js 1.x 的原生方法机理上是有区别的。上文说到,实现这对方法的关键点在于准确地找到组件实例。那在寻找组件实例上,我们的“惯用伎俩”就是通过遍历来匹配组件的 `name` 选项,在独立组件(库)里,每个组件的 `name` 值应当是唯一的,name 主要用于递归组件。
先来看下 emitter.js 的代码
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const name = child.$options.name;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
因为是用作 mixins 导入,所以在 methods 里定义的 dispatch 和 broadcast 方法会被混合到组件里,自然就可以用 `this.dispatch` 和 `this.broadcast` 来使用。
这两个方法都接收了三个参数,第一个是组件的 `name` 值,用于向上或向下递归遍历来寻找对应的组件,第二个和第三个就是上文分析的自定义事件名称和要传递的数据。
可以看到,在 dispatch 里,通过 while 语句,不断向上遍历更新当前组件(即上下文为当前调用该方法的组件)的父组件实例(变量 parent 即为父组件实例),直到匹配到定义的 `componentName` 与某个上级组件的 `name` 选项一致时,结束循环,并在找到的组件实例上,调用 `$emit` 方法来触发自定义事件 `eventName`。broadcast 方法与之类似,只不过是向下遍历寻找。
来看一下具体的使用方法。有 A.vue 和 B.vue 两个组件,其中 B 是 A 的子组件,中间可能跨多级,在 A 中向 B 通信:
<!-- A.vue -->
<template>
<button @click="handleClick">触发事件</button>
</template>
<script>
import Emitter from'../mixins/emitter.js';
export default {
name: 'componentA',
mixins: [ Emitter ],
methods: {
handleClick () {
this.broadcast('componentB', 'on-message', 'Hello Vue.js');
}
}
}
</script>
// B.vue
export default {
name: 'componentB',
created () {
this.$on('on-message', this.showMessage);
},
methods: {
showMessage (text) {
window.alert(text);
}
}
}
同理,如果是 B 向 A 通信,在 B 中调用 dispatch 方法,在 A 中使用 $on 监听事件即可。
以上就是自行实现的 dispatch 和 broadcast 方法,相比 Vue.js 1.x,有以下不同:
- 需要额外传入组件的 name 作为第一个参数;
- 无冒泡机制;
- 第三个参数传递的数据,只能是一个(较多时可以传入一个对象),而 Vue.js 1.x 可以传入多个参数,当然,你对 emitter.js 稍作修改,也能支持传入多个参数,只是一般场景传入一个对象足以。
注:本文由作者搜集,并非原创。。。