依赖注入 provide 与 inject

本文主要是介绍依赖注入 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 提供的数据，实现父子组件之间的依赖注入。

这篇关于依赖注入 provide 与 inject的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---