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>