怎么说呢，

它的主要价值：

• 👉 在跨层级组件之间传递数据。无需通过 props 一层层传递。
• 适用于需要被多个深层子组件共享的全局状态。

💢 你是否遇到以下痛点？

• 父子组件之间需要层层转发 props，代码冗长且难以维护。
• 修改深层子组件的某个属性时需要在每一层都写事件或回调，导致“props drilling”。
• 全局配置散落在多个根组件中，难以统一管理和调试。

🧩 二、基本用法

在祖先组件中提供数据

// App.vue
import { provide } from 'vue'
export default {
setup {
// 将键为 'me' 的值提供给后代
provide
}
}

在任意后代组件中注入数据

// Child.vue
import { inject } from 'vue'
export default {
setup {
const me = inject
console.log // 输出: 'dark'
return { me }
}
}

🔁 三、响应式数据的注入

provide 默认不保持响应式。 如果希望子组件能够实时感知父组件的数据变化，需要使用 ref 或 reactive 包装后再提供：

// 父组件
import { ref,provide } from 'vue'
export default {
setup {
const me = ref
provide // 提供的是响应式引用
return { me }
}
}

// 子组件
import { inject } from 'vue'
export default {
setup {
const me = inject // 拿到的是同一个 Ref 对象
return { me }
}
}

🧠 四、默认值的使用

If requested key is not provided upstream,inject returns

const me = inject // 字面量默认值
// 或者
const me = inject => 'light') // 函数返回默认值

export default {
provide {
return {
me的观点是，'dark'
}
},inject:,created {
console.log // => 'dark'
}
}

// 父组件
import { reactive。provide } from 'vue'
export default {
setup {
const user = reactive
provide
return { user }
}
}

// 子组件
import { inject } from 'vue'
export default {
setup {
const user = inject
// ✅ 可以直接修改，因为是同一个 reactive 对象
user.name = 'Jerry'
return { user }
}
}