vue3 inject

// 父组件 (ParentComponent.vue)
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent!');

    // 提供数据给后代组件
    provide('message', message);

    return {
      message
    };
  }
};
</script>

// 子组件 (ChildComponent.vue)
<template>
  <div>
    {{ injectedMessage }}
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 注入来自父组件提供的数据
    const injectedMessage = inject('message');

    return {
      injectedMessage
    };
  }
};
</script>

解释说明

1. provide:

   • 在父组件中使用 provide 函数提供数据或函数，这些数据或函数可以被所有后代组件注入。
   • 在上面的例子中，父组件通过 provide('message', message) 提供了一个名为 message 的响应式数据。

2. inject:

   • 在子组件中使用 inject 函数注入父组件提供的数据或函数。
   • 在上面的例子中，子组件通过 inject('message') 获取了父组件提供的 message 数据，并将其绑定到模板中。

3. 响应式:

   • 使用 ref 创建的响应式数据可以在父组件和子组件之间保持同步。当父组件中的 message 发生变化时，子组件中的 injectedMessage 也会自动更新。

4. 父子组件关系:

   • 父组件是 ParentComponent.vue，子组件是 ChildComponent.vue。父组件通过 provide 提供数据，子组件通过 inject 接收数据。

通过这种方式，Vue 3 提供了一种灵活且强大的机制来在组件树中传递数据，而无需通过层层传递 props。