Vue3 中的 provide 和 inject 深度解析

核心概念

provide - 提供数据

provide 函数用于在祖先组件中定义要传递给后代的数据：

import { provide } from 'vue'

export default {
  setup() {
    const theme = ref('dark')
    
    // 提供静态数据
    provide('theme', 'dark')
    
    // 提供响应式数据
    provide('reactiveTheme', theme)
    
    // 提供方法
    provide('changeTheme', (newTheme) => {
      theme.value = newTheme
    })
  }
}

inject - 注入数据

inject 函数用于在后代组件中接收祖先组件提供的数据：

import { inject } from 'vue'

export default {

setup() {

// 注入数据（默认值可选）

const theme = inject('theme', 'light') // 第二个参数是默认值

// 注入响应式数据

const reactiveTheme = inject('reactiveTheme')

// 注入方法

const changeTheme = inject('changeTheme')

return { theme, reactiveTheme, changeTheme }

}

}

实际应用场景

1. 主题切换：全局主题配置
2. 用户信息：登录用户信息全局可用
3. 多语言：国际化文本
4. 全局配置：应用级别的设置
5. 插件开发：为组件提供插件功能

Vue3 的 provide 和 inject 提供了一种优雅的跨组件通信方式，特别适合祖先到后代的深层数据传递。合理使用可以减少 prop 逐层传递的繁琐，但也要注意不要滥用，保持组件树的清晰性和可维护性。对于复杂应用状态，建议结合状态管理库使用。