Vue 3 中怎么使用 `provide` 和 `inject` API？
warning:
这篇文章距离上次修改已过186天，其中的内容可能已经有所变动。
在Vue 3中，provide和injectAPI用于跨组件提供和注入依赖。provide函数在父组件中定义要提供的属性，而inject函数则在子组件中声明要接收的属性。
以下是一个简单的例子：
父组件 (ParentComponent.vue):
<script setup>
import { provide } from 'vue';
// 提供一个名为 message 的响应式属性
provide('message', 'Hello from parent component!');
</script>
<template>
<ChildComponent />
</template>子组件 (ChildComponent.vue):
<script setup>
import { inject } from 'vue';
// 注入名为 message 的属性
const message = inject('message');
</script>
<template>
<div>{{ message }}</div>
</template>在这个例子中，ParentComponent 提供了一个名为 message 的值，然后 ChildComponent 通过 inject 获取这个值并在模板中显示。这样，无论组件层次结构有多深，子组件都可以直接从其父组件或祖先组件中接收这个值。
评论已关闭