inject() 注入祖先提供的依赖
最后更新：2026-10-22
inject() 注入祖先提供的依赖
inject() 在任意后代组件取用祖先 provide 的数据，可给默认值兜底。
| 分组 | 依赖注入 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
const theme = inject("theme") // 未提供时为 undefined
const theme = inject("theme", "light") // 默认值
const theme = inject("theme", () => ref("light")) // 工厂默认值（推荐，避免共享实例）⚙️ 参数
| key | 依赖键（与 provide 对应） |
|---|---|
| defaultValue | 可选默认值；传工厂函数可避免引用共享 |
返回值：注入的值（未提供时返回默认值或 undefined）
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
没有 provide 时显示「主题：默认亮色」。💡 要点
⚠️ 注意 默认值不要传对象/数组字面量：多个组件会共享同一实例，用工厂函数返回新对象。
💡 提示 依赖响应式时记得注入后保持 ref 形态，模板自动解包，脚本里写 .value。
ℹ️ 说明 只能在 setup 或组合式函数里调用（同步执行阶段）。
🏷️ 相关依赖注入
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 祖先没提供会报错吗？
A 不会，返回 undefined（开发环境有提示），所以给默认值更稳。
Q 注入后改它能影响到祖先吗？
A 拿到的是同一引用：改 ref 的 .value 会影响祖先状态，这通常不是期望行为。
Q 为什么要用工厂默认值？
A 每次调用生成独立实例，避免多个组件互相污染默认数据。
