Vue 如何实现组件间通信同级组件不能直接传值，需要一个中间桥梁，可以先将数据传递给公共的父组件，然后父组件再将数据传递

父子组件：子组件使用$emit('eventName',data)，父组件使用$on('eventName',function(){})

//子组件Test.vue
<template>
  <div @click="$emit('test-event','123')">test</div>
</template>

//父组件监听test-event事件，faterFn为回调函数
<test @test-event="faterFn"></test>

任意组件：使用 eventBus = new Vue() 来通信，eventBus.$on 和 eventBus.$emit 是主要API 平级组件通信同级组件不能直接传值，需要一个中间桥梁，可以先将数据传递给公共的父组件，然后父组件再将数据传递给需要的子组件。

//新建一个 eventBus.js
//代码很简单(就2句)，只是创建一个空的vue实例
import Vue from 'vue'
export default new Vue()

//在需要通信的同级组件中分别引入eventBus.js文件
import bus from '../eventBus.js'
//在page1.vue中，通过$emit将事件和参数传递给page2.vue
title(text){
    bus.$emit('textChange',text) 
} 
//在page2.vue 中，通过$on接收接收参数和相应事件
import bus from '../eventBus.js'
bus.$on("textChange", (text) => {
  this.message = text
});

（不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。因此，我们推荐你始终使用 kebab-case 的事件名。）-- 摘自Vue官方文档

任意组件：使用 Vuex 通信