foreword
Most of the students who have used vue know the use of $emit and $on. We just know how to use, and sometimes it's not enough. Now I will lead you to write a middleware that is simply similar to the empty instance of Vue.
Communication between non-parent-child components
The communication vue official website of non-parent-child components gives such a solution.
Sometimes communication is also required between two components that are not in a parent-child relationship. In simple scenarios, an empty Vue instance can be used as the event bus:
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
Simple example
Here is a very simple example
//工具
var myBus = (function() {
var clienlist = {},
addlisten, trigger, remove;
/**
* 增加订阅者
* @key {String} 类型
* @fn {Function} 回掉函数
* */
addlisten = function(key, fn) {
if(!clienlist[key]) {
clienlist[key] = [];
}
clienlist[key].push(fn);
};
/**
* 发布消息
* */
trigger = function() {
var key = [].shift.call(arguments), //取出消息类型
fns = clienlist[key]; //取出该类型的对应的消息集合
if(!fns || fns.length === 0) {
return false;
}
for(var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
};
/**
* 删除订阅
* @key {String} 类型
* @fn {Function} 回掉函数
* */
remove = function(key, fn) {
var fns = clienlist[key]; //取出该类型的对应的消息集合
if(!fns) { //如果对应的key没有订阅直接返回
return false;
}
if(!fn) { //如果没有传入具体的回掉,则表示需要取消所有订阅
fns && (fns.length = 0);
} else {
for(var l = fns.length - 1; l >= 0; l--) { //遍历回掉函数列表
if(fn === fns[l]) {
fns.splice(l, 1); //删除订阅者的回掉
}
}
}
};
return {
$on: addlisten,
$emit: trigger,
$off: remove
}
})();
//组件一
Vue.component('vv-count', {
props: ["count"],
template: '<div>\
<span>{{count}}</span><button @click="handelClick" type="button">计算</button>\
</div>',
methods: {
handelClick() {
console.log('vv-count总计:', this.count);
if(vue_bus){
//触发发布--使用vue
bus.$emit("vv_count", this.count,'这是使用vue的')
}else{
//触发发布--使用自己的
myBus.$emit("vv_count", this.count,'这是自己写的')
}
}
}
});
//组件二
Vue.component('vv-count1', {
props: ["count"],
template: '<div>\
<span>{{count}}</span><button @click="handelClick" type="button">计算</button>\
</div>',
methods: {
handelClick() {
console.log('vv-count1总计:', this.count);
if(vue_bus){
//触发发布
bus.$emit("vv_count", this.count)
}else{
//触发发布
myBus.$emit("vv_count", this.count)
}
}
}
});
var vue_bus=true;// true:使用vue的事件总线,false:使用自己的事件总线
if(vue_bus){
//中间件
var bus = new Vue();
//使用vue的事件总线--订阅
bus.$on("vv_count", function() {
console.log("使用bus发布的参数==", arguments);
});
}else{
//使用自己的事件总线--订阅
myBus.$on("vv_count", function() {
console.log("使用myBus发布的参数==", arguments);
});
}
new Vue({
el: "#app"
});
The above code can use vue_bus=true or false to switch each other to see the effect. as the picture shows:
If you want to see a more detailed explanation, please preview the publish-subscribe model or publish-subscribe model
Summarize
The publish and subscribe principle in vue is the same as the publish and subscribe principle written by oneself. I hope everyone can get the knowledge.
Reward channel -- I don't think there will be a reward.