借助中央事件总线实现非父子组件通信
创建Bus.js文件
import Vue from 'vue';
export default new Vue;
Bus.js文件一般都是放在assets文件下面
组件1中
<button @click='sendMsg'>传送信息给组件2</button>
import Bus from '@/assets/js/bus';
export default {
methods:{
sendMsg(){
Bus.$emit('send','我是组件1');
}
}
}
点击按钮时,中央事件总线通过 $emit
发送一个send事件
组件2中
import Bus from '@/assets/js/bus';
export default {
created(){
Bus.$on('send',(val)=>{
console.log(val);
})
}
}
中央事件总线通过 $on
监听组件1中发送的send事件,
用一个回调函数接受传过来的参数