provide() 向后代提供依赖

最后更新：2026-10-22

provide() 在祖先组件提供数据，任何层级后代都能用 inject 获取，避免逐层透传 props。

📝 语法

provide("theme", ref("dark"))
provide("config", readonly(config))   // 建议：只读提供

key	字符串或 Symbol 作为依赖键
value	任意值（ref/响应式对象可保持响应性）

返回值：无

修改下面的代码，在预览区实时查看效果：

输出：

子组件显示「注入到的主题：暗色」。

💡 提示 提供 ref / reactive 数据可让后代保持响应性；提供普通值则是一次性快照。

⚠️ 注意 建议配合 readonly 提供：直接暴露可写状态会让任意后代都能改到祖先数据。

ℹ️ 说明 键名用 Symbol 常量可避免命名冲突（大型项目/库推荐）。

更多案例即将上线。

Q 和 props 有什么区别？

A props 逐层显式传递；provide/inject 直接跨层级，但数据来源不如 props 直观，适合主题、配置这类全局上下文。

Q provide 的数据能修改吗？

A 能（后代拿到引用即可改），因此推荐只提供 readonly 或提供修改函数。

Q 同名键会冲突吗？

A 最近的提供者生效；用 Symbol 键可彻底避免。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。