vue eventBus实现兄弟组件互相通信

vue父子组件的通信可以通过props和emit来实现,而兄弟组件无法通过props和emit通信。

但是可以采用eventBus的方式来实现通信,主要的原理是新建一个bus,然后再两个兄弟组件之间引入这个bus,一个组件监听事件,而另一个组件则负责触发事件。

父组件App.vue




bus.js

import Vue from "vue"
export default new Vue(); 

car.vue


gasStation.vue



当在car组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在gasStation里面,这个时候就会触发gasStation

上的事件监听,而通过回调函数,就可以拿到car组件传过来的数据,从而实现兄弟组件通信。



你可能感兴趣的:(vue eventBus实现兄弟组件互相通信)