Provide/Inject

Provide/Inject 允许祖先组件向子孙组件注入依赖。

基本用法

祖先组件

JavaScript

export default {
  provide() {
    return {
      theme: 'dark',
      size: 'large'
    }
  }
}

子孙组件

JavaScript

export default {
  inject: ['theme', 'size'],
  mounted() {
    console.log(this.theme) // 'dark'
  }
}

Composition API

JavaScript

import { provide, inject } from 'vue'

// 祖先
provide('theme', 'dark')

// 子孙
const theme = inject('theme')

响应式 Provide

JavaScript

import { ref, provide } from 'vue'

export default {
  setup() {
    const theme = ref('light')
    provide('theme', theme)
    
    return { theme }
  }
}

注入方可响应变化。

默认值

JavaScript

const theme = inject('theme', 'light')

// 工厂函数
const user = inject('user', () => ({ name: 'Guest' }))

Provide/Inject 主要用于插件开发或深层组件树，业务逻辑推荐状态管理。

要点总结

provide 提供数据，inject 注入数据
跨层级通信，无需逐层传递
Composition API 使用 provide() 和 inject() 函数
可提供响应式数据
适用于插件开发或深层组件