vue.js 非父子通信-事件总线

Vue.js 中，非父子组件之间的通信可以使用事件总线来实现。事件总线是一个中央化的事件管理器，可以让任意组件之间进行通信。

实现事件总线的步骤如下：

1. 创建一个新的 Vue 实例作为事件总线：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

1. 在需要通信的组件中，通过 EventBus 发送事件：

// ComponentA.vue
import { EventBus } from './EventBus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from ComponentA');
    }
  }
}

1. 在接收事件的组件中，通过 EventBus 监听事件：

// ComponentB.vue
import { EventBus } from './EventBus.js';
export default {
  mounted() {
    EventBus.$on('message', (data) => {
      console.log(data); // 输出：Hello from ComponentA
    });
  }
}

这样，ComponentA 组件通过 EventBus 发送了一个名为 message 的事件，并传递了数据 'Hello from ComponentA'。ComponentB 组件通过 EventBus 监听了 message 事件，并在回调函数中打印收到的数据。

代码示例：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from ComponentA');
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('message', (data) => {
      this.message = data;
    });
  }
}
</script>

在这个示例中，当点击 "Send Message" 按钮时，ComponentA 组件通过 EventBus 发送了一个名为 message 的事件，并传递了数据 'Hello from ComponentA'。ComponentB 组件通过 EventBus 监听了 message 事件，并将收到的数据赋值给 message 属性，然后在页面上显示出来。

使用事件总线可以让非父子组件之间进行灵活的通信，但也可能导致组件之间的关系变得复杂，难以追踪和维护。因此，在使用事件总线时，需要注意合理使用，避免滥用。