vue2非父子组件通信

在 Vue 2 中，非父子组件之间的通信可以通过事件总线、Vuex 和 provide/inject 来实现。

1. 事件总线 (Event Bus): 在 Vue 实例上创建一个中央事件总线，其他组件可以订阅和触发事件。这种方式适用于简单的组件通信场景。
- 创建事件总线：

     // main.js
     Vue.prototype.$bus = new Vue();

- 在发送组件中触发事件：

     this.$bus.$emit('event-name', data);

- 在接收组件中订阅事件：

     mounted() {
       this.$bus.$on('event-name', (data) => {
         // 处理接收到的数据
       });
     },

2. Vuex: Vuex 是 Vue.js 官方提供的状态管理库，用于在组件之间共享状态。非父子组件通过 Vuex 存储和获取数据。
- 定义和导出 store：

     // store.js
     import Vue from 'vue';
     import Vuex from 'vuex';

     Vue.use(Vuex);

     export default new Vuex.Store({
       state: {
         data: null,
       },
       mutations: {
         setData(state, payload) {
           state.data = payload;
         },
       },
       actions: {
         updateData({ commit }, payload) {
           commit('setData', payload);
         },
       },
     });

- 在发送组件中使用 dispatch 触发 action：

     this.$store.dispatch('updateData', data);

- 在接收组件中使用 mapState 辅助函数获取数据：

     computed: {
       ...mapState(['data']),
     },

3. provide/inject: 使用 provide 和 inject 实现非父子组件之间的数据传递。这种方式适用于跨层级的组件通信。
- 在父组件中使用 provide 提供数据：

     provide() {
       return {
         data: this.data,
       };
     },

- 在子组件中使用 inject 注入数据：

     inject: ['data'],