Vue Academy · 课时

在子组件中使用 inject()

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

使用带默认值的 inject()、必需注入，以及用于命名空间的 Symbol 键。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用带默认值的 inject()、必需注入，以及用于命名空间的 Symbol 键。

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

inject 函数

inject 会根据相同的键获取祖先组件提供的值。在 <script setup> 中调用它。

import { inject } from "vue";
const theme = inject("theme");

响应性得以保留

如果祖先组件提供的是一个引用，注入的值就是同一个引用。读取 theme.value 仍然具有响应性，并会在提供者修改它时更新。

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

提供默认值

如果没有祖先组件提供该键，inject 会返回 undefined。请传入第二个参数作为默认值，让组件能够优雅地处理这种情况。

const theme = inject("theme", "light");
// "light" used when nothing was provided

工厂默认值

对于对象或创建成本较高的默认值，请传入一个工厂函数，并将第三个参数设为 true，这样只有在需要时才会创建默认值。

const config = inject("config", () => ({ retries: 3 }), true);

注入操作

如果提供者还提供了一个函数，请以相同方式注入该函数，并调用它来请求更改——状态修改仍由提供者负责。

const updateName = inject("updateName");
updateName("Grace");

注入状态存储对象

当提供者将状态和操作打包在一起时，请注入整个对象，然后解构出您需要的内容。

const { user, updateName } = inject("userStore");

TypeScript 中的类型安全注入

Vue 导出 InjectionKey<T> 来确保注入具有类型安全性。类型化的键会准确告知 TypeScript 注入值的结构。

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

使用类型化的键

使用类型化的键进行提供和注入。现在 TypeScript 会推断值的类型，并指出不匹配之处。

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

使用符号键确保唯一性

使用 Symbol 作为键（通常与 InjectionKey 结合使用），可以确保大型代码库中彼此无关的提供者之间不会发生字符串冲突。

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

处理缺少提供者的情况

在严格的设置中，如果必需的注入缺失，您可能希望直接抛出错误，以便尽早发现连接错误，而不是悄悄使用未定义的值。

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

在子树中的任意位置注入

只要某个祖先组件提供了该键，组件就可以在任意深度进行注入。中间组件完全不受影响——这正是 provide/inject 的意义所在。

快速检查

当不存在提供者时，inject("theme", "light") 会返回什么？

回顾

您已学习 inject(key) 可以读取提供的值，并保留引用的响应性。请传入默认值（或工厂函数）以实现优雅的回退，并结合 Symbol 键使用 InjectionKey<T>，实现类型安全且无冲突的注入。

常见问题解答

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

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

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

使用带默认值的 inject()、必需注入，以及用于命名空间的 Symbol 键。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 Vue Academy