VUE中eventBus可以用来进行任何组件之间的通信,我们可以把eventBus当成一个管道,这个管道两端可以接好多组件,两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例,实例中的$on, $off, $emit方法来实现此功能。先通过简单例子看看eventBus怎么用。
<script src="./vue.js"></script>
<div id="app">
<child-comp-1></child-comp-1>
<child-comp-2></child-comp-2>
</div>
<script>
var eventBus = new Vue();
Vue.component('child-comp-1', {
template: "<div></div>",
mounted: function () {
eventBus.$on("event", function(value){
console.log("child-comp-1 receive event: " + value);
});
}
});
Vue.component('child-comp-2', {
template: "<div></div>",
mounted: function () {
eventBus.$emit("event", "here is comp2 msg");
}
});
const app = new Vue({
el: '#app'
});
</script>
我们实例化了一个Vue实例,并赋值给了eventBus全局变量。那么我们就可以在任何地方使用这个全局变量。接下来我们看看这个Vue实例中的$on 和 $emit方法。
function eventsMixin (Vue) {
var hookRE = /^hook:/;
Vue.prototype.$on = function (event, fn) { // event 数组或者字符串 fn 回调函数
// 注册事件时,将回调函数收集起来,触发时一次调用即可
var vm = this;
if (Array.isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
vm.$on(event[i], fn);
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn);
if (hookRE.test(event)) {
vm._hasHookEvent = true;
}
}
return vm
};
Vue.prototype.$once = function (event, fn) { // 只触发一次,触发后移除
var vm = this;
function on () { // 拦截器
vm.$off(event, on);
fn.apply(vm, arguments);
}
on.fn = fn;
vm.$on(event, on);
return vm
};
Vue.prototype.$off = function (event, fn) {
/* 三种情况:
1、如果没有提供参数,则移除所有的事件监听器
2、只提供事件,则移除该事件上的所有的监听器
3、如果同时提供了事件与回调,则只移除这个回调的监听器
*/
var vm = this;
// all
if (!arguments.length) {
vm._events = Object.create(null);
return vm
}
// array of events
if (Array.isArray(event)) {
for (var i$1 = 0, l = event.length; i$1 < l; i$1++) {
vm.$off(event[i$1], fn);
}
return vm
}
// specific event
var cbs = vm._events[event];
if (!cbs) {
return vm
}
if (!fn) {
vm._events[event] = null;
return vm
}
// specific handler
var cb;
var i = cbs.length;
while (i--) { // 细节:遍历从后向前循环,在列表中移除当前位置的监听器时,不会影响列表中未遍历的监听器的位置,如果从前往后,后面的监听器会自动向前移动一位,会导致下一轮循环时跳过一个元素
cb = cbs[i];
if (cb === fn || cb.fn === fn) { // cb.fn === fn $once的时候
cbs.splice(i, 1);
break
}
}
return vm
};
Vue.prototype.$emit = function (event) {
var vm = this;
var cbs = vm._events[event];
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1); // toArray的作用:将类似于数组的数据转换成真正的数组,他的第二个参数时起始位置,也就是说args是一个数组,里面包含了第一个参数之外的所有参数
var info = "event handler for \"" + event + "\"";
for (var i = 0, l = cbs.length; i < l; i++) {
invokeWithErrorHandling(cbs[i], vm, args, vm, info);
}
}
return vm
};
}
用 _events 存储事件,在new Vue()时,vue执行this._init方法进行一系列初始化操作,其中vue.js实例上创建一个_events属性:vm._events=Object.create(null)
在移除监听器的时候,需要将用户提供的监听器函数与列表中的监听器函数进行对比,相同部分会被移除,导致我们使用拦截器注入到事件列表中时,拦截器和用户提供的函数不相同的,此时用户使用vm.$off来移除监听器,移除操作会失败。
解决方法:将用户提供的原始监听器保存在拦截器的fn中 cb.fn === fn 比较。