Vue 依赖注入怎么传递响应式修改做法实现子孙对祖先状态的逆向更新

provide/inject 可实现祖先→后代的单向数据流，但通过传递 ref 响应式对象及配套修改函数，能达成子孙触发、祖先更新的逆向同步；关键在于共享同一 ref 实例并统一操作源。

Vue 的 provide/inject 本身是单向的（祖先 → 后代），但通过传递响应式引用 + 修改函数，完全可以实现“子孙触发、祖先更新”的逆向状态同步。关键不是绕过响应式，而是把修改逻辑也作为依赖一并提供出去。

用 ref + 函数组合实现双向联动

祖先组件不仅要提供数据，还要提供能修改它的函数，并确保该函数作用在同一个响应式源上。

1. 在祖先中定义 ref 或 reactive 状态，同时定义一个修改它的函数（如 updateName）
2. 用 provide 一起传出去：数据本身 + 修改函数
3. 后代组件用 inject 拿到两者，调用函数即可实时更新祖先状态

代码示例：孙子组件更新爷爷的用户名

祖先组件（App.vue）：

<script setup>

import { ref, provide } from 'vue'

const userName = ref('张三')

// 提供数据和配套修改方法

provide('userInfo', {

name: userName,

updateName: (newName) => { userName.value = newName }

})

</script>

孙子组件（GrandChild.vue）：

<script setup>

import { inject } from 'vue'

const userInfo = inject('userInfo')

// 直接使用响应式值

const currentName = userInfo.name

// 调用函数更新祖先状态

const changeName = () => {

userInfo.updateName('李四')

}

</script>

为什么这样能保持响应式？

因为 userName 是 ref，它被直接提供出去；后代拿到的是同一个 ref 实例，value 的变更会自动触发所有依赖它的视图更新。函数只是操作这个 ref 的入口，不破坏响应链。

1. 不要在后代里重新赋值 userInfo.name = ref(...) —— 这会切断响应连接
2. 避免把普通对象或原始值（如字符串）当作状态主体来提供，否则修改不会响应
3. 若需多个字段，建议用 reactive 包裹对象，再提供整个对象 + 方法

进阶：支持默认值与类型安全（可选）

为防止注入失败，可在 inject 中设默认值；TypeScript 用户还可配合 InjectionKey 做类型约束：

import { inject, InjectionKey } from 'vue'

const userInfoKey = Symbol() as InjectionKey<{ name: Ref<string>; updateName: (v: string) => void }>

const userInfo = inject(userInfoKey, {

name: ref(''),

updateName: () => {}

})