兄弟组件A 兄弟组件B 效果如图
1.main.js 配置全局总线
new Vue({
render: h => h(App),
// 中央事件总线(全局事件总线)
beforeCreate() {
Vue.prototype.$bus = this // 配置全局事件总线 $bus , ****必须在页面挂载之前****
}
}).$mount('#app')
2.搞清是谁给谁传,或者说谁要接收谁的数据。比如现在是 B > A 。也就是A要接收数据,所以去A里面绑定全局事件 Event 用来接收数据 ,会有一个回调,这个回调就是A要接收过来的数据
<template>
<div class="A">
<h2>兄弟A</h2>
<p>A的一个数据: {{ msgA }}</p>
<p>B传过来的数据: {{ BtoA }}</p>
</div>
</template>
<script>
export default {
data() {
return {
msgA: "data-A",
BtoA: "",
};
},
mounted() {
//绑定全局事件Event
this.$bus.$on("Event", (e) => {
this.BtoA = e;
});
},
destroyed() {
this.$bus.off("Event"); // 销毁 Event事件,因为其他组件通信还要用 $bus
},
};
</script>
3.去B(给A发送数据的组件),用 $emit 触发刚才A要接收数据定义那个事件(Event),把要传递的数据扔后面。
<template>
<div class="A">
<h2>兄弟B</h2>
<p>B的一个数据: {{ msgB }}</p>
<button @click="sandMsgToA">把B的数据data-B给A</button>
</div>
</template>
<script>
export default {
data() {
return {
msgB: "data-B",
};
},
methods: {
sandMsgToA() {
//触发全局事件Event
this.$bus.$emit("Event", this.msgB);
},
},
};
</script>
关于全局事件总线的详细解析(其中详细解析了如何 配置全局事件总线,如何传递数据,及其原理)