vue2.0 中央控制总线 Bus
1. 废话不多说,直接上代码
2. main.js中 加入
// main.js
//创建中央控制总线 Bus
// 说白了就是new一个vue实例,将方法挂在上去
Vue.prototype.$event = new Vue();
- 事件分发***(A组件中)***
// A组件中
// 事件分发
// 参数一 方法名
// 参数二 传递出去的参数
methods: {
clickFun(){
this.$event.$emit('refreshFun',Math.random())
},
}
- 事件监听 (B组件)
// 事件监听
mounted() {
this.$event.$on("refreshFun", (val) => {
console.log(val) // 0.7022180283884656
});
},
- 事件销毁***(A组件中)***
beforeDestroy(){
this.$event.off('refreshFun')
}
- 一个简单的事件分发完成!
- 当然你也可以在 (拓展 main.js )
// 对方法进一步的处理
Vue.prototype.$event = new vue({
data:{
},
methods:{
//绑定事件
on(eventname,callback){
this.$on(eventname, callback);
},
//触发事件,传递数据
emit(eventname,...arg){
this.$emit(eventname, ...args);
},
// 解绑
off(eventname,callback){
this.$off(event, callback);
}
}
}
// ...............................