1.第一步:新建vue-bus文件夹,在该文件下新建index.js
/*
封装一个中央事件总插件vue-bus,可以在任意组件间使用,而不需要导入bus
给Vue添加一个属性$bus,并代理$emit, $on, $off三个方法
*/
1 const install = function(Vue) { 2 const Bus = new Vue({ 3 methods: { 4 emit (event, ...args) { 5 this.$emit(event, ...args); 6 }, 7 on (event, callback) { 8 this.$on(event, callback); 9 }, 10 off (event, callback) { 11 this.$off(event, callback); 12 }, 13 } 14 }) 15 16 Vue.prototype.$bus = Bus; 17 } 18 19 export default install;
2.第二步:
在main.js中使用:
import VueBus from './vue-bus';
Vue.use(VueBus);
3.第三步就可以在组件中使用了:
1 backtoHome() { 2 this.$bus.emit('overfl-visi',this.overflVisible); 3 this.$router.push('/home'); 4 } 5 6 7 created () { 8 this.$bus.on('overfl-visi', this.changeOverflow); 9 } 10 11 beforeDestroy () { 12 this.$bus.off('overfl-visi', this.changeOverflow); 13 }
使用vue-bus有两点需要注意:
第一是$bus.on应该再created钩子内使用,如果在mounted使用,它可能接收不到其他组件来自created钩子内发出的事件
第二是使用了$bus.on,在beforeDestroy钩子里应该使用$bus.off解除。因为组件销毁后,就没必要把监听的句柄储存在vue-bus里了。