Vue3中Provide和Inject的使用

Vue3中的依赖注入API： Provide和Inject，实现祖先组件向后代组件传递数据，避免props逐层传递的繁琐

Provide(提供者）

• 祖先组件通过provide()提供数据

        const count = ref(0)
        // 提供静态数据
        provide('appName', 'My App')
        // 提供响应式数据
        provide('count', count)
        // 提供方法
        provide('increment', () => {
            count.value ++
        })

Inject(消费者)

在后代组件中使用inject()注入数据

    const appName = inject('appName', 'Default name')
    const count = inject('count')
    const increment = inject('increment')

使用场景

1. 深层嵌套组件通信
2. 全局配置/主题
3. 插件开发

最佳实践

• 使用Symbol作为key避免命名冲突

export const COUNT_KEY = Symbol()
// 提供者
provide(COUNT_KEY, count)
// 消费者
const count = inject(COUNT_KEY)

• 提供响应式数据：确保数据变化时组件能够更新

provide('count', readonly(count)) // 使用readonly防止意外修改

• 使用组合式函数封装
  eg: useCounter.js

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++

  provide('counter', { count, increment })
}

使用useCounter

const { count, increment } = inject('counter')