provide 向后代提供数据（选项式）

最后更新：2026-10-22

provide 选项以对象或函数形式向后代提供数据：对象形式提供静态值，函数形式可用 this 访问组件状态。

📝 语法

export default {
  data() { return { theme: "dark" } },
  provide() {
    return { theme: this.theme }   // 注意：快照值
  }
}

value	对象或返回对象的函数（函数形式可用 this；需要响应性要传响应式对象）

返回值：无返回值

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

输出：

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

⚠️ 注意 对象字面量提供的是快照：要传递响应性请提供 ref/reactive 对象。

💡 提示 团队约定用与组合式 provide 相同的键名，迁移时更省心。

ℹ️ 说明 选项式 provide 不支持 Symbol 键的写法差异——直接用对象即可。

更多案例即将上线。

Q 为什么提供 data 值不更新？

A 对象形式在初始化时取值一次（快照）；改提供响应式对象或函数返回。

Q 能和组合式混用吗？

A 可以：provide/inject 底层机制相同，键名一致即可互相注入。

Q 什么时候用函数形式？

A 需要访问 this（data/methods）时用它返回对象。

Web-Tutorial 技术团队

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