Vue Provide/Inject — 跨层级传值
学习祖先组件向任意后代组件直接传值，跳过props逐层传递的麻烦 · 难度：进阶 · +20XP
Provide/Inject 解决什么问题？
正常情况下，父子组件传值用 Props，但如果有三层嵌套：根组件 → 中间组件 → 孙组件
Props需要逐层传递（Prop Drilling）：根→中间→孙。中间组件自己不用的数据也必须接收和转发。
Provide/Inject 让你直接跨层传递：根组件提供数据，孙组件直接注入使用，跳过中间组件。
基本用法
// 祖先组件：提供数据
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);
// 任意后代组件：注入使用
import { inject } from "vue";
const theme = inject("theme"); // 拿到 "dark"
响应式 Provide
provide引用类型（ref/reactive）是响应式的——提供者改了数据，所有注入者自动更新。可以用 readonly 防止后代修改。
Provide/Inject vs Props vs 状态管理
| 方式 | 适用场景 |
|---|---|
| Props | 1-2层父子传递 |
| Provide/Inject | 跨多层传递（主题、语言、用户信息） |
| Pinia/Vuex | 复杂全局状态管理 |
动手试试
右边：根组件provide主题，子组件inject使用。点击切换主题，所有组件同步变化——不需要任何Props！