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]