全局事件总线(GlobalEventBus)
一种组件间通信的方式,适用于
任意组件间通信
在 main.js 中安装全局事件总线
在生命周期函数 beforeCreate 中安装
//创建vm
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
}
}).$mount('#app')
发送 $bus.$emit
<template>
<div>
<h1>{
{ msg }}</h1>
<button @click="postmsg">向A发送消息</button>
</div>
</template>
<script>
export default {
name:'Bb',
data(){
return {
msg:'我是B组件'
}
},
methods:{
postmsg(){
this.$bus.$emit('hello',this.msg) //('名称',数据)
}
}
}
</script>
接收 $bus.$on
<template>
<div>
<h1>{
{ msg }}</h1>
</div>
</template>
<script>
export default {
name:'Aa',
data(){
return {
msg:'我是A组件'
}
},
mounted(){
this.$bus.$on('hello',(data)=>{
console.log('A收到了来自B的数据',data);
})
},
//最好在 beforeDestroy 钩子中,用$off去解绑当前组件所用到的事件,否则身上东西太多了
beforeDestroy(){
this.$bus.$off('hello')
}
}
</script>