vue3组件传值 依赖注入 子传父

Vue3 中，组件之间的数据传递主要有三种方式：props、自定义事件以及Vuex。

1. **Props（属性）**：这是一种从父组件向子组件单向的数据传递方式。父组件通过props将数据传给子组件，子组件只能读取这些数据而不能修改，除非父组件主动更新它们。这是最直接和简单的方式，用于基本的状态管理。

2. **依赖注入（Dependency Injection, DI）**：在更复杂的场景下，特别是大型应用，可以利用官方提供的 `inject` 和 `provide` 功能实现服务的注入。父组件可以通过提供服务（如store实例），然后在需要的地方通过 `inject` 注入该服务，这种方式有利于解耦和维护。

3. **子组件传父（自定义事件）**：如果子组件有状态改变需要通知父组件的情况，可以使用自定义事件（$emit和$on）。当子组件的状态发生改变时，触发一个自定义事件并携带新的状态，父组件订阅这个事件并在接收到新状态后更新自身。

相关问题

vue父组件传值子组件有哪些方法

Vue父组件向子组件传递值有以下几种方法：

1. props 静态传递：父组件通过 props 把数据传递给子组件，子组件通过 props 接收数据。这种方法适用于父子组件之间的数据传递，是最常用的一种方式。

2. v-bind 动态传递：父组件通过 v-bind 把数据动态地传递给子组件。这种方法适用于需要动态传递数据的情况。

3. $emit 事件传递：子组件通过 $emit 把事件传递给父组件，父组件通过监听事件并接收数据。这种方法适用于子组件需要向父组件传递数据的情况。

4. $parent 取父级组件传递的值：子组件通过 $parent 访问父级组件的数据。这种方法适用于子组件与父组件有紧密联系的情况。

5. provide/inject 依赖注入：父组件通过 provide 把数据注入到子组件中，子组件通过 inject 接收数据。这种方法适用于跨越多层级的组件之间的数据传递。

其中，props 和 $emit 是 Vue 中最常用的组件通信方式。

vue3兄弟组件之间传值

在Vue3中，兄弟组件之间传值可以通过以下方式实现：

1. 使用事件总线(Event Bus)

事件总线是一种通信方式，可以在Vue应用程序中跨越多个组件进行通信。在Vue3中，可以使用`mitt`库来实现事件总线。首先在项目中安装`mitt`库：

npm install mitt

然后在需要进行通信的组件中创建一个事件总线实例：

import mitt from 'mitt'

const eventBus = mitt()

在发送方组件中使用`eventBus.emit()`方法触发事件：

eventBus.emit('eventName', eventData)

在接收方组件中使用`eventBus.on()`方法监听事件并获取数据：

eventBus.on('eventName', eventData => {
  // 处理数据
})

2. 使用provide/inject

`provide/inject`是Vue3提供的一种依赖注入方式，可以在父组件中向子组件传递数据。使用`provide`方法在父组件中提供数据：

import { provide } from 'vue'

provide('dataName', data)

在子组件中使用`inject`方法注入数据：

import { inject } from 'vue'

const data = inject('dataName')

3. 使用vuex

vuex是Vue的状态管理库，可以在Vue应用程序中进行集中式管理。在Vuex中，可以通过`state`中的数据来实现兄弟组件之间的通信。在发送方组件中使用`this.$store.commit()`方法触发`mutation`来修改`state`中的数据：

this.$store.commit('mutationName', data)

在接收方组件中使用`mapState`方法映射`state`中的数据：

import { mapState } from 'vuex'

...mapState({
  stateName: state => state.dataName
})