组件间通信的方式:适用于任意组件间通信
使用步骤:
1、安装全局事件总线
new Vue({
...
beforeCreate(){
//用一个vue实例来充当事件总线对象,将EventBus对象挂载到Vue原型上,让所有的组件都可以访问
Vue.prototype.$bus=this; // $bus就是当前应用的vm
},
...
})
2、使用事件总线:
(A组件给B组件传递数据)B组件接收数据,则在B组件中给$bus绑定自定义事件,事件的回调留在B组件自身 (A组件触发事件,B组件执行事件回调)
注:通过this.$bus.$on('事件名',回调) 给B绑定自定义事件时,回调
要么配置在methods中,要么在mounted里用箭头函数,否则this指向会出问题
// A组件
<button @click='sendMsg'>发送数据给B组件</button>
methods: {
sendMsg () {
// A组件提供数据:
this.$eventBus.$emit('事件名',数据) // 第一个参数是事件名,第二个参数是要发送的数据
}
}
// B组件
methods(){
回调(date){...}
}
或者:
mounted(){
this.$bus.$on('事件名',回调)
}
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
往vue的原型对象上挂一个vc实例对象,使用$on