Vue Academy · 课时

在父组件中使用 provide()

Q: 「在父组件中使用 provide()」这节课中我会学到什么？

提供基本类型值、响应式引用和对象，以及通过 provide 保持响应性。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

提供基本类型值、响应式引用和对象，以及通过 provide 保持响应性。

在父组件中使用 provide() 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

provide 函数

Vue 的 provide 可以让组件向所有后代组件提供数据。在 <script setup> 中使用键和值调用它。

import { provide } from "vue";
provide("message", "Hello from ancestor");

任何后代组件都可以注入

数据提供后，组件树中位于下方的任何组件都可以使用相同的键进行 inject，无论相隔多少层，中间组件都无需做任何处理。

App (provides "message")
  -> ... -> DeepChild (injects "message")

提供响应式状态

为了让后代组件保持响应式，请提供一个引用（或响应式对象），而不是普通值。引用的更新会自动传播给每个使用者。

import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);

响应性向下传递

当祖先组件更改 theme.value 时，所有注入该值的后代组件都会使用新值重新渲染。这是它优于传递静态快照的关键优势。

function toggle() {
  theme.value = theme.value === "dark" ? "light" : "dark";
}

使用只读保护状态

默认情况下，后代组件可以修改注入的引用，这会使状态变更散落各处，并破坏单向数据流。请将值包装在 readonly() 中，让使用者只能读取而不能写入。

import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));

将函数作为操作提供

如果希望后代组件请求更改，请将一个函数与只读状态一起提供。使用者调用该函数，而只有提供者会修改源数据。

function updateName(name) {
  user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);

将状态和操作打包

一种整洁的模式是提供一个包含只读状态及其操作的单一对象，类似于一个小型状态存储。

provide("userStore", {
  user: readonly(user),
  updateName
});

应用级 provide

您也可以在应用级别提供数据，让每个组件都能使用该值，并且只需在应用实例上设置一次。（后文将详细介绍。）

app.provide("appName", "CoddyKit");

使用符号键避免冲突

在大型应用中，字符串键可能发生冲突。请使用从共享模块导出的 Symbol 作为键，以确保唯一性。

// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);

何时使用 provide

对于主题、当前用户、国际化、表单上下文或功能配置等子树所需的值，provide 非常理想。对于一到两层的传递，普通属性仍然更简单。

提供者作用域

提供的值仅在提供它的组件子树中有效。两个兄弟子树可以在相同键下提供不同的值，互不干扰。

快速检查

如何阻止后代组件修改所提供的状态？

回顾

您已学习 provide(key, value) 会将数据暴露给所有后代组件。提供一个引用以保持响应性，将其包装在 readonly() 中以防止修改，将函数作为操作提供，并优先使用 Symbol 键来避免冲突。

常见问题解答

「在父组件中使用 provide()」课时是免费的吗？

是的 — 「在父组件中使用 provide()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「在父组件中使用 provide()」这节课中我会学到什么？

提供基本类型值、响应式引用和对象，以及通过 provide 保持响应性。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「在父组件中使用 provide()」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy