provide 和 inject 是 vue 3 composition api 中实现祖孙跨层级通信的官方方式，祖先通过 provide 暴露响应式数据、普通值或函数，后代通过 inject 按键名获取，中间组件无需参与，支持 symbol 键和 typescript 类型安全。
Vue 3 的 Composition API 中，provide 和 inject 是实现祖孙（甚至更深层）跨层级传参的官方推荐方式。它不依赖 props 逐层透传，而是建立一条“祖先→任意后代”的直连通道。关键在于：祖先用 provide 暴露数据或函数，后代用 inject 主动获取，中间组件完全无需参与。
祖先组件中使用 provide 提供数据
在顶层或中间某层祖先组件的 setup() 或 <script setup> 中调用 <code>provide，传入一个唯一标识键（字符串或 Symbol）和要共享的值。该值可以是：</script></p>
<ul>
<li>响应式数据（<code>ref</code>、<code>reactive</code>），变更会自动同步到注入方</li>
<li>普通值（如字符串、对象字面量），但修改不会响应式更新</li>
<li>函数（常用于让子孙触发祖先逻辑，实现“逆向通信”）</li>
</ul>
<p>例如：</p>
<font color="#888"><!-- ParentComponent.<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue</a> --></font><br><font color="#888"><script setup></script>
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)
后代组件中使用 inject 接收数据
在任意深度的子组件（包括孙组件、曾孙组件）中，用 inject 按键名取值。注意：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 必须使用与
provide中完全一致的键名 - 如果键不存在且未设默认值，返回
undefined - 可传入第二个参数作为默认值（支持函数，默认值本身是函数时需加第三个参数
false）
例如：
<script setup></script>
import { inject } from 'vue'
const userName = inject('userName')
const userConfig = inject('userConfig')
const updateUser = inject('updateUser')
// 修改响应式数据，祖先会立刻感知
const changeName = () => updateUser('Bob')
响应式与数据流向的注意事项
provide/inject 本身不创造响应性，但若提供的是 ref 或 reactive 对象，注入后仍保持响应式。不过需注意：
- 注入的响应式数据应直接使用其
.value（ref）或属性（reactive），不要解构，否则会丢失响应性 - 不建议在后代组件中直接修改
reactive对象的顶层属性（如userConfig.theme = 'light'），虽可行但违背单向数据流原则；更推荐由祖先提供修改方法（如上面的updateUser） - 多个祖先提供同名 key 时，离注入组件最近的那个生效（就近覆盖）
配合 TypeScript 使用更安全
为避免键名拼写错误，可用 Symbol 作为 key：
const UserNameKey = Symbol('UserName')provide(UserNameKey, userName)
const userName = inject(UserNameKey)
再配合类型断言或泛型，能获得完整类型提示和编译期检查，大幅提升大型项目的可维护性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
