Vue3 中如何解决子组件相互传值问题

在 Vue3 的项目开发中，子组件相互传值是一个常见的需求。有效解决这一问题，能够提升组件间的交互效率，优化整个应用的性能。下面将介绍几种常见的解决方法。

事件总线（Event Bus）

事件总线是一个简单的全局对象，它充当了各个组件之间传递信息的桥梁。创建一个单独的 eventBus.js 文件，在其中导出一个新的 Vue 实例。例如：

import { createApp } from 'vue';
const eventBus = createApp({}).$mount();
export default eventBus;

在需要发送数据的子组件中引入 eventBus，并通过 $emit 方法触发一个自定义事件并传递数据。如：

import eventBus from '@/eventBus';
export default {
  methods: {
    sendData() {
      const data = '这是要传递的数据';
      eventBus.$emit('data-event', data);
    }
  }
}

在接收数据的子组件中，引入 eventBus 并通过 $on 方法监听自定义事件。例如：

import eventBus from '@/eventBus';
export default {
  created() {
    eventBus.$on('data-event', (data) => {
      console.log('接收到的数据:', data);
    });
  }
}

Vuex 状态管理库

Vuex 是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 首先安装 Vuex 并引入到项目中。定义一个 store.js 文件，在其中配置 state、mutations 等。如：

import { createStore } from 'vuex';
const store = createStore({
  state() {
    return {
      sharedData: ''
    }
  },
  mutations: {
    setData(state, data) {
      state.sharedData = data;
    }
  }
});
export default store;

在发送数据的子组件中，通过 this.$store.commit 提交 mutation 来更新数据。如：

export default {
  methods: {
    sendData() {
      const data = '通过 Vuex 传递的数据';
      this.$store.commit('setData', data);
    }
  }
}

在接收数据的子组件中，通过 this.$store.state 获取数据。例如：

export default {
  computed: {
    receivedData() {
      return this.$store.state.sharedData;
    }
  }
}

父组件中转

当子组件 A 要向子组件 B 传值时，可以先将数据传递给父组件，再由父组件传递给子组件 B。在子组件 A 中通过 $emit 触发自定义事件将数据传递给父组件，父组件监听事件接收数据，然后通过 props 将数据传递给子组件 B。

以上这些方法各有优劣，开发者可根据项目的实际需求和规模，选择最合适的方式来解决 Vue3 中子组件相互传值的问题。