Vue3 inject() 函数（长文解析）

Vue3 inject() 函数核心概念

inject() 是 Vue 3.0 提供的依赖注入函数，允许子组件直接从祖先组件获取共享数据。其本质是打破层级传递的 props 限制，实现跨组件通信。当需要在深层嵌套组件间共享配置或服务时，使用 inject() 比逐层传递 props 更高效简洁。

Vue3 inject() 函数基础语法

父组件提供数据

// 父组件
import { provide } from 'vue'

export default {
  setup() {
    const themeColor = ref('blue')
    // 提供响应式数据
    provide('themeColor', themeColor)
  }
}

子组件注入数据

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    // 注入祖先组件提供的themeColor
    const themeColor = inject('themeColor')
    return { themeColor }
  }
}

类型声明与默认值

// 带类型声明的注入
const themeColor = inject('themeColor', ref('default-color')) 
// 使用可选值注入
const config = inject('config', { default: () => ({ theme: 'dark' }) })

Vue3 inject() 函数进阶特性

响应式注入

// 父组件使用reactive包裹
const settings = reactive({ fontSize: 16 })
provide('settings', settings)

// 子组件注入
const settings = inject('settings') 
// 修改时会触发视图更新
settings.fontSize = 20 

可选值注入

// 子组件注入可选值
const config = inject('config', { 
  default: () => ({ timeout: 5000 }),
  // 类型校验
  type: Object 
})

多依赖注入

// 同时注入多个依赖
const [theme, settings] = inject(['themeColor', 'settings']) 
// 等价于单独注入
const themeColor = inject('themeColor')
const settings = inject('settings')

Vue3 inject() 函数实战应用

全局主题配置

// App.vue
provide('theme', reactive({ color: 'green', size: '14px' }))

// ChildComponent.vue
const theme = inject('theme')
document.body.style.color = theme.color.value 

跨层级事件总线

// 父组件
const eventBus = mitt()
provide('eventBus', eventBus)

// 子组件
const bus = inject('eventBus')
bus.emit('update', { data: 'new value' }) 
bus.on('update', handler) 

多语言支持系统

// 父组件
const lang = ref('zh-CN')
provide('lang', lang)

// 子组件
const lang = inject('lang')
const t = (key) => i18n.value[lang.value][key] 

Vue3 inject() 函数注意事项

1. 未定义默认值时直接使用 inject() 会抛出警告，建议始终设置默认值
2. 避免过度依赖注入，复杂场景推荐使用 Vuex/Pinia 状态管理
3. 注入值类型不匹配时，Vue 3.0 的类型检查会强制报错
4. 注入的 ref 响应式对象需要 .value 访问，普通对象直接访问