依赖注入 provide 与 inject

在父组件中使用 provide 提供数据，并在子组件中使用 inject 获取这些数据。

说明

• 创建一个父组件 ParentComponent，它使用 provide 提供一个值给子组件。
• 创建一个子组件 ChildComponent，它使用 inject 获取父组件提供的数据并在模板中展示。

代码实现

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

<script lang="ts" setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 定义一个提供的值
const providedValue: string = 'Hello from ParentComponent!';

// 使用 provide 提供值给子组件
provide<string>('myValue', providedValue);
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>Injected Value: {{ injectedValue }}</p>
  </div>
</template>

<script lang="ts" setup>
import { inject } from 'vue';

// 使用 inject 获取父组件提供的值
const injectedValue = inject<string>('myValue', 'Default Value');
</script>

组件解释

1. ParentComponent.vue

   • 使用 provide 提供一个键为 'myValue' 的值，这个值可以被子组件获取。

2. ChildComponent.vue

   • 使用 inject 获取父组件通过 'myValue' 提供的值，并将其显示在模板中。如果父组件未提供该值，则使用默认值 'Default Value'。

使用方式

将 ParentComponent.vue 和 ChildComponent.vue 放在项目的合适位置（例如 components 文件夹下），并在应用中引用 ParentComponent.vue 来查看效果。

这样，子组件可以轻松获取父组件通过 provide 提供的数据，实现父子组件之间的依赖注入。