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 子组件之间传值的方法

#### 使用 Provide/Inject 实现子组件间的通信
Provide/inject 主要用于祖代组件向后代组件提供数据，但也可以间接实现兄弟组件之间的通信。祖先组件通过 `provide` 提供属性给子孙节点，在需要接收这些属性的地方使用 `inject` 来获取。

// 父组件 ParentComponent.vue
export default {
  setup() {
    const message = ref('Hello from parent');
    
    provide('sharedMessage', message);

    return { /* ... */ };
  }
}

// 子组件 ChildA.vue 和 ChildB.vue 可以注入相同的依赖项
import { inject } from 'vue';

export default {
  setup() {
    const sharedMessage = inject('sharedMessage');

    return { sharedMessage };
  }
}

[^2]

#### 利用 Emitting Events (事件触发)
虽然 emit 更常用来做子到父方向上的消息传递，但是配合 `$parent.$emit()` 或者 Vuex store 的话也能完成跨级甚至平级的通讯任务。不过这种方式不够直观也不推荐作为首选方案。

#### 借助 Composition API 创建全局状态管理器
Composition API 是 Vue 3 新增的功能之一，允许开发者更灵活地组合逻辑片段并将其应用于多个地方。可以利用此特性构建简单的状态管理系统来处理不同层次结构下的组件交互问题。

// src/composables/useSharedState.ts
import { reactive, readonly } from "vue";

const state = reactive({
  count: 0,
});

function increment() {
  state.count++;
}

export function useCounter() {
  return { counter: readonly(state), increment };
}

然后在任何想要访问计数器数值或操作它的组件里引入这个 composable 函数：

// ComponentOne.vue & ComponentTwo.vue
import { onMounted } from "vue";
import { useCounter } from "@/composables/useSharedState";

export default {
  name: "ComponentOne",
  setup() {
    const { counter, increment } = useCounter();

    onMounted(() => {
      console.log(`Current Count is ${counter.count}`);
    });

    return { counter, increment };
  },
};

[^1]