此方法需要保证兄弟组件 A、B 都在同一个父组件下;
父组件通过接受子组件A传递过来的事件消息,并调用子组件B
// 子组件 Athis.$emit('transmit', 'msg')
// 父组件<ChildA @transmit="transmit"></ChildA><ChildB :msg="msg"></ChildB>transmit (data) => {this.msg = data}
// 子组件 B、需要使用 watch 来监听父组件 props 穿过来的数据变化watch (new, old) {数据操作...}
通过创建Bus.js注册一个全局实例,通讯组件通过调用实例的方法达到通讯目的
// eventBus 共享vue实例,用于兄弟组件数据传递import Vue from 'vue'const Bus = new Vue({})export {Bus}
import {Bus} from './Bus.js'Bus.$emit('transmit', 'msg')
import {Bus} from './Bus.js'mounted () {Bus.$on('transmit', (data) => {// 操作...})}// 由于$on事件无法主动销毁,所以需要根据业务手动进行销毁// 在组件销毁前方法中销毁beforeDestory () {Bus.$off('transmit')}// 或者在使用前进行销毁mounted () {Bus.$off('transmit')Bus.$on('transmit', (data) => {// 操作...})}