Vue Composition API如何使用 provide 和 inject 实现跨层级祖孙传参

provide 和 inject 是 Vue 3 Composition API 中实现祖孙跨层级通信的最新方式，祖先通过 provide 暴露响应式数据、普通值或函数，后代通过 inject 按键名获取，中间组件无需参与，支持 Symbol 键和 TypeScript 类型安全。

Vue 3 的 Composition API 中，provide 和 inject 是实现祖孙（甚至更深层）跨层级传参的最新推荐方式。它不依赖 props 逐层透传，而是建立一条“祖先→任意后代”的直连通道。关键在于：祖先用 provide 暴露数据或函数，后代用 inject 主动获取，中间组件完全无需参与。

祖先组件中使用 provide 提供数据

在顶层或中间某层祖先组件的 setup() 或 中调用 provide，传入一个唯一标识键（字符串或 Symbol）和要共享的值。该值可以是：

1. 响应式数据（ref、reactive），变更会自动同步到注入方
2. 普通值（如字符串、对象字面量），但修改不会响应式更新
3. 函数（常用于让子孙触发祖先逻辑，实现“逆向通信”）

例如：

<!-- ParentComponent.vue -->

<script setup>

import { provide, ref, reactive } from 'vue'

const userName = ref('Alice')

const userConfig = reactive({ theme: 'dark', lang: 'zh' })

const updateUser = (name) => { userName.value = name }

provide('userName', userName)

provide('userConfig', userConfig)

provide('updateUser', updateUser)

</script>

后代组件中使用 inject 接收数据

在任意深度的子组件（包括孙组件、曾孙组件）中，用 inject 按键名取值。注意：

1. 必须使用与 provide 中完全一致的键名
2. 如果键不存在且未设默认值，返回 undefined
3. 可传入第二个参数作为默认值（支持函数，默认值本身是函数时需加第三个参数 false）

例如：

<!-- GrandChildComponent.vue -->

<script setup>

import { inject } from 'vue'

const userName = inject('userName')

const userConfig = inject('userConfig')

const updateUser = inject('updateUser')

// 修改响应式数据，祖先会立刻感知

const changeName = () => updateUser('Bob')

</script>

响应式与数据流向的注意事项

provide/inject 本身不创造响应性，但若提供的是 ref 或 reactive 对象，注入后仍保持响应式。不过需注意：

1. 注入的响应式数据应直接使用其 .value（ref）或属性（reactive），不要解构，否则会丢失响应性
2. 不建议在后代组件中直接修改 reactive 对象的顶层属性（如 userConfig.theme = 'light'），虽可行但违背单向数据流原则；更推荐由祖先提供修改方法（如上面的 updateUser）
3. 多个祖先提供同名 key 时，离注入组件最近的那个生效（就近覆盖）

配合 TypeScript 使用更安全

为避免键名拼写错误，可用 Symbol 作为 key：

const UserNameKey = Symbol('UserName')

provide(UserNameKey, userName)

const userName = inject(UserNameKey)

再配合类型断言或泛型，能获得完整类型提示和编译期检查，大幅提升大型项目的可维护性。