vue兄弟组件之间通信（EventBus 事件总线）

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

通信方法

let bus = new Vue()
//触发A组件中的事件
bus.$emit('event',123)
//在组件B创建的钩子监听事件
bus.$on('event',function(n){
	console.log(n)
})

代码演示

使用一个空的 Vue 实例作为事件总线

  // main.js  也可以在其它地方创建比如自己的utils里
  export var bus = new Vue()
  //

A组件

<template>
  <div>
    <span>我是A组件的数据->{{a}}</span>
    <input type="button" value="把A数据传给C" @click = "send">
  </div>
</template>

<script>
  // 引入空的实例
  import { bus } from '@/main.js'
  export default {
    data () {
      return {
        a: "我是a组件中数据"
      }
    },
    methods: {
     send () {
       bus.$emit("event", this.a)
     }
    }
  }
</script>

<style>
</style>

B组件

<template>
  <div>
    <div>
        <h3>我是B组件</h3>
        <span>接收过来A的数据为: {{a}}</span>
        <br>
    </div>
  </div>
</template>

<script>
  // 引入空的实例
  import { bus } from '@/main.js'
  export default {
    data () {
      return {
        a: ""
      }
    },
    mounted () {
      // 监听事件
      bus.$on("event", (a) => this.a = a)
    }
  }
</script>