vue 消息订阅与发布

vue 消息订阅与发布

一、场景

　　vue中非父子组件之间通信时，使用vuex有时间会很麻烦，这时候可以通过bus总线来实现 消息的订阅与发布

 

二、实现方法

　　1、main.js

//main.js
 
Vue.prototype.bus = new Vue();
new Vue({
  render: h => h(App)
    ...
}).$mount('#app');
/*
*通过把一个vue实例赋于Vue构造函数原型上的一个属性bus（当然起任何名称都是可以的）
*而每个Vue实例都是有$emit和$on方法的
*由于bus属性在Vue原型上，根据原型链查找规则，在页面中我们就可以通过 this.bus.$emit 和 
*this.bus.$on来进行跨组件通信了
*/

　　2、消息发布

　　可以在任何组件中

//发布一个事件
this.bus.$emit('even-name'，args1, arg2 , ...)

　　3、消息订阅

　　一般可以写在 created 或 mounted 中

// 消息订阅
this.bus.$on('event-name', (...args) => {
    //接收参数，触发方法相应的方法等操作
})

　　

　　~~ 以上 就ok了