vue两个组件之间通信,不使用父子关系
2019-08-24 本文已影响0人
舒尔诚
vue中的bus事件,一般作为中央事件总线来使用
简单例子:比如在A,B组件为兄弟组件,现在A要调用B的中C事件
1.创建一个bus.js
内容:
import Vue from 'vue'
const Bus = new Vue()
export { Bus }
2.在A,B组件中引入bus.js
import { Bus } from 'bus'
3.在A组件中定义要调用B事件的bus事件名
例如:Bus.$emit('callC')
4.在B组件中调用C方法
Bus.$on('callC',this.C)
Bus.$on里有两个参数,第一个是在A组件定义的名字,第二个参数是B组件要调用的方法,第二个参数也可以自定义方法,
如:
A中触发:Bus.$emit("pushmsg", msg);//触发中央总线
B中定义,在mounted中定义:
let that=this;
Bus.$on('pushmsg',msg=>{
that.pushmsg(msg);
});