Vue基础之组件通讯兄弟传兄弟

1.需要一个EventBus.js 事件总线 里面就做三件事 引入vue 创建vm 实例对象  然后暴露出这个vm示例对象
2.在A兄弟组件中定义一个事件比如点击事件来触发开始在事件执行体中使用Vm.$emit这个API来传递数据这里步骤基本上和子传父的子组件操作相同
3.在B兄弟组件中需要在Vue生命周期 createdh 函数中利用Vm.$on这个API来侦听$emit，只要$emit的执行体中的状态/数据发生变化则$on这个方法就执行。
    ：示例代码如下

//在A组件中
<template>
  <div>
    <h3>我是子组件A</h3>
    <button @click="onadd">点我传递数据到B兄弟页面</button>
  </div>
</template>

<script>
import {Vm} from "./EventBus";

export default {
    data() {
        return {
            x:'我是子组件内容我要去父组件'
        }
    },
    methods:{
        onadd(){
            Vm.$emit("onx",this.x)
        }
    }
}
</script>

//在B组件中
<template>
  <div>
    <h3>我是子组件B</h3>
    <h5>{{content}}</h5>
  </div>
</template>

<script>
import {Vm} from "./EventBus";

export default {
data() {
    return {
        content:''
    }
},
created(){
    Vm.$on("onx",(content)=>{this.content=content})
}
}
</script>