vue组件通信方式：
1、父传子： props
2、子传父： $emit
3、非父子之间的通信，中央事件总线bus
使用中央时间总线的方式有两种:
一、新建一个bus.js文件，初始化一个空的Vue实例，作为中央总线，然后再组件引用时调用这个bus.js文件
import Vue from ‘vue‘; const EventBus = new Vue(); export default EventBus;
二、是main.js全局定义，将bus挂载到vue.prototype上
import Vue from ‘vue‘; Vue.prototype.bus = new Vue();
中央事件总线使用方法：
子组件1
<template>
<section>
<h1>left</h1>
<el-button type="primary" @click="isClick">点击</el-button>
</section>
</template>
<script>
import eventBus from ‘~/utils/eventBus‘;
export default {
methods: {
isClick() {
eventBus.$emit(‘isLeft‘, ‘点击事件！‘);
this.bus.$emit(‘liRight‘, ‘asdasdasdasd‘);
}
}
}
</script>
子组件2
<template>
<section>
<h1>right</h1>
</section>
</template>
<script>
import eventBus from ‘~/utils/eventBus‘;
export default {
data() {
return {
name: ‘right默认值‘
};
},
mounted() {
this.bus.$on(‘liRight‘, (val) => {
console.log(val);
});
eventBus.$on(‘isLeft‘, (info) => {
console.log(info);
});
},
beforeDestroy() {
this.bus.$off([‘isLeft‘, ‘liRight‘])
}
}
</script>
父组件
<template>
<section>
<el-row>
<el-col :span="12">
<left/>
</el-col>
<el-col :span="12">
<right />
</el-col>
</el-row>
</section>
</template>
<script>
import left from ‘~/components/left‘
import right from ‘~/components/right‘
export default {
components: {
left,
right
}
}
</script>
以上事例，我们在组件1中触发了事件，然后组件2中监听到事件，并进行相关操作，两个组件是非父子组件通信
原文：https://www.cnblogs.com/tangjianqiang/p/14451899.html