vue组件通信之$bus(事件总线)
$bus 思路是在全局挂载一个实例,通过这个实例里的事件派发和事件监听实现跨组件通信,设计模式叫做观察者模式。
使用场景:跨多层级组件传参,不顺路要坐bus。
第一步
创建一个$bus对象 (main.js)
class Bus { constructor(){ this.callbacks = {} } $on(name, fn){ this.callbacks[name] = this.callbacks[name] || [] this.callbacks[name].push(fn) } $emit(name, args){ if(this.callbacks[name]){ this.callbacks[name].forEach(cb => cb(args)) } } }
第二步
实例化Bus并挂载到vue全局上 (main.js)
Vue.prototype.$bus = new Bus();
经过上面两个步骤我们就创建了一个全局的$bus对象,并且可以随时随地调用它里面的$on和$emit方法。
第三步
在需要讲数据传递出去的组件里做事件派发,即调用$emit方法
第一个参数是事件名称,第二个参数是要传递的数据
this.$bus.$emit("event1","somethings from helloworld");
第四步
在需要接收数据的组件里做事件监听,即调用$on方法,监听的方法一般写在mounted里面
this.$bus.$on("event1",function(aaa){ console.log(aaa) })
以上就是事件总线的方法