#Provide / Inject

跨层级传数据的神器

#干什么用的？

祖先组件向任意后代组件传数据，避免 props 层层传递。

#怎么用？

#Provide

祖先组件提供数据：

provide('key', value)

#Inject

后代组件接收：

const value = inject('key', defaultValue)

#响应式问题

• provide 普通对象 → 不是响应式的
• provide ref / reactive → 是响应式的

const count = ref(0);
provide('count', count);

建议：同时 provide 一个 update 方法，让后代调用来修改数据。

#原理

组件实例维护 provides 对象。子组件的 provides 继承自父组件（Object.create(parent.provides)）。

inject 时顺着原型链向上查找。

#什么时候用？

• Props：父子通信，清晰
• Provide/Inject：跨层级，避免透传
• Pinia：全局共享状态

适合场景：开发 UI 组件库时（如 Form 传递规则给 FormItem），不能用 Pinia。

#总结