Vue provide/inject 依赖注入

利用 provide/inject 实现跨层级组件通信，避免 Props 逐层传递的繁琐。 · 难度：入门 · +15XP

provide/inject 简介

Vue 的 provide 和 inject 允许祖先组件向所有后代组件注入依赖，无论组件层级多深，而不需要显式地通过 props 逐层传递。

provide 提供数据

// 祖先组件
export default {
  provide() {
    return {
      theme: 'dark',
      user: this.user
    }
  }
}

在 Composition API 中：

import { provide } from 'vue'
provide('theme', 'dark')

inject 注入数据

// 后代组件
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme) // 'dark'
  }
}

Composition API：

import { inject } from 'vue'
const theme = inject('theme')

响应式注入

推荐提供 ref 或 reactive 对象，使注入的数据也是响应式的。

const count = ref(0)
provide('count', count)
// 后代
const count = inject('count')
count.value++ // 祖先也会更新

练习提示

1. 祖先组件提供 user 对象（包含 name 和 role）。
2. 孙组件注入并显示用户信息。