如果咱们的应用程序不需要类似Vuex
这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus
来通信。
首先在main.js
种挂载全局EventBus
// 事件总线
Vue.prototype.$EventBus = new Vue()
在组件A里面:
<template>
<div class="wrap">
<div>我是组件A</div>
<button @click="sendMsg">点击发送</button>
</div>
</template>
<script>
export default {
name: "A",
methods:{
sendMsg(){
this.$EventBus.$emit('sendMsg',"这是组件A发送的消息!")
}
}
}
</script>
在组件B里面:
<template>
<div>
<div>我是组件B</div>
</div>
</template>
<script>
export default {
name: "B",
mounted(){
this.$EventBus.$on('sendMsg',(msg)=>{
console.log(msg);//这是组件A传递过来的消息!
})
},
}
</script>
概念介绍:EventBus
又称为事件总线。在Vue
中可以使用 EventBus
来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的Vuex
作为状态管理中心,将通知的概念上升到共享状态层次。