vue3--依赖注入

依赖注入主要通过provide和inject这对 API 实现用于解决组件树中跨层级传递数据的问题避免繁琐的 props 逐层传递prop drilling。1.provide提供依赖父组件作为依赖的提供者!-- 祖先组件 -- script setup import { provide, ref } from vue // 提供普通值 provide(theme, dark) // 提供响应式数据 const count ref(0) provide(count, count) // 提供方法 const updateCount (val) count.value val provide(updateCount, updateCount) /script2.inject注入依赖后代组件注入使用!-- 后代组件 -- script setup import { inject } from vue // 注入普通值可设置默认值 const theme inject(theme, light) // 注入响应式数据保持响应性 const count inject(count) // 注入方法 const updateCount inject(updateCount) // 处理可能不存在的依赖 const optional inject(optionalKey, 默认值) /script