Vue 组件开发：利用 Provide 实现跨级回调

Provide 本身不直接实现回调，而是通过传递响应式数据与绑定函数的组合对象（如 { count, increment }），使后代组件能安全触发祖先状态更新；需避免直接传普通函数或浅拷贝，推荐用 Symbol key 和 readonly 增强安全性。

Provide 本身不直接“实现回调”，但它能安全、清晰地把修改能力（比如函数）从祖先组件向下传递，让后代组件触发时，真正更新源头状态——这才是跨级回调的实质。

为什么不能只传普通函数？

单纯 provide 一个普通函数（如 handleClick() {}），后代调用它确实能执行逻辑，但若该函数内部要修改祖先的状态，就必须确保它能访问到响应式数据（如 ref 或 reactive）。否则，更新不会触发视图响应。

• 错误写法：在 provide 中直接写 provide(‘onClick’, () => count++) —— count 不是响应式引用，修改无效
• 正确思路：把响应式数据和操作函数一起封装，保持响应链完整

推荐做法：提供带状态绑定的函数对象

祖先组件中，将 ref 和 setter 打包成一个对象提供出去，后代注入后既能读值，也能调用方法更新：

• 使用 ref 管理状态，确保响应性
• 用箭头函数或闭包方式定义 setter，明确作用域
• 推荐用 Symbol 作 key，避免命名冲突

示例（祖先组件）：

立即学习“前端免费学习笔记（深入）”；

<script setup>
import { provide, ref } from ‘vue’
const count = ref(0)
const increment = () => { count.value++ }
const reset = () => { count.value = 0 }
provide(‘counterCtx’, { count, increment, reset })
</script>

后代组件如何安全调用？

inject 返回的是同一个响应式对象引用，因此可直接解构并使用：

• 模板中：{{ counterCtx.count.value }}，@click=”counterCtx.increment”
• 脚本中：const { count, increment } = inject(‘counterCtx’)，调用 increment() 即实时更新祖先的 count
• 注意：不要对 inject 结果做浅拷贝或结构赋值（如 const { count } = …），否则可能丢失响应性；Vue 3.4+ 支持安全解构 reactive 对象，但 ref 仍需保留 .value 访问

需要只读或防误改？加一层保护

如果希望后代只能触发动作、不能直接改值（如防止 count.value = 999），可用 readonly 包裹整个上下文：

• 祖先中：provide(‘counterCtx’, readonly({ count, increment, reset }))
• 这样后代无法赋值 count，但调用 increment 依然生效（因为函数内部修改的是原始 ref）
• 兼顾安全性与可控性，适合表单、主题、权限等上下文场景