https://my.oschina.net/cisbest/blog/3064764
vue里的组件通信可以通过props父组件向子组件传数据，子组件通过`$emit`向父组件。兄弟组件通信一般通过父组件。如果有多个兄弟组件需要同时传数据，使用子传父，父在传子的方法就很麻烦。当然也可以直接使用vuex。不过还可以利用vux提供的 `vm.$on` 和 `vm.$emit` 这两个 `api` 进行多个不相关的组件通信。使用方法如下。当然，这里只是简单的示例只有2个组件通信，Home组件是多余的，不过为了展示效果，可以多个组件同时通信使用也是没问题的。
– 项目结构
<template>
<div>
<Son1 />
<hr />
<Son2 />
</div>
</template>
<script>
import Son1 from “./Son1.vue”;
import Son2 from “./Son2.vue”;
export default {
name: “Home”,
components: { Son1, Son2 }
};
</script>
import Vue from “vue”;
export default new Vue();
<template>
<div>
<button @click=”send”>向son2发送数据</button>
</div>
</template>
<script>
import Repeater from “./Repeater.js”;
export default {
methods: {
send() {
Repeater.$emit(“son1->son2”, “你好son2”);
}
}
};
</script>
<template>
<div>这是来自son1的数据===》{{ son1 }}</div>
</template>
<script>
import Repeater from “./Repeater.js”;
export default {
data() {
return {
son1: “”
};
},
mounted() {
Repeater.$on(“son1->son2”, msg => {
this.son1 = msg;
});
}
};
</script>
如果多个组件都需要用到的同步数据，必须挂载在同一个vue示例下，不然不同组件的数据就不会同步响应。有点单例模式的味道。