Vue单文件组件中provide/inject用于祖先向后代跨层级传递响应式数据，避免props逐层透传；祖先用provide提供reactive或ref数据，后代用inject获取并保持响应性，需注意命名冲突与默认值设置。

Vue 单文件组件中使用 provide 与 inject，核心是让祖先组件“提供”数据，任意后代组件“注入”使用，跳过中间层级。它不替代 props，而是专治深层嵌套时的传值冗余问题。

祖先组件怎么写 provide

在祖先组件（比如 Layout、App 或某个父级业务组件）的 setup() 或选项式 API 中声明 provide：

• 组合式 API（Vue 3 推荐）：必须先从 vue 导入 provide，且只能在 setup() 内调用
• 选项式 API：可直接写为对象，但如果要访问 this（如 data、computed），必须写成函数形式，否则拿不到响应式数据
• 推荐始终用函数写法，避免踩坑。例如：
  <script>
  import { provide } from 'vue'
  export default {
    setup() {
      const theme = { color: 'blue', fontSize: '14px' }
      provide('theme', theme)
      return {}
    }
  }
  </script>

后代组件怎么写 inject

在任意子孙组件中，通过 inject 获取数据。同样分两种写法：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 组合式 API：导入 inject，在 setup() 中调用，返回值可直接解构或赋值给响应式变量
• 选项式 API：在组件选项中写 inject: ['theme']，然后在 data、computed 或生命周期中用 this.theme
• 支持设置默认值，防止祖先未提供时出错，例如：inject('theme', { color: 'gray' })
• 如果注入的是响应式对象（比如 ref 或 reactive），其内部属性仍保持响应；但直接注入原始值（如字符串）不会自动响应——所以通常建议传 reactive 对象或 ref

注意响应式与命名冲突

provide/inject 本身不创建响应式连接，但可以传递响应式数据：

立即学习“前端免费学习笔记（深入）”；

• 若祖先用 reactive({ count: 0 }) 提供，后代注入后修改 count，所有注入处都会更新
• 若祖先用 ref(1) 提供，后代需用 inject('countRef') 并解包使用 .value
• 后代组件不能声明同名的 data、props 或 computed，否则会覆盖注入值，Vue 会报错或静默失效

实际场景示例：主题配置透传

比如一个主题切换功能，App.vue 提供主题对象，菜单、按钮、表单等深层组件都可直接读取：

• App.vue 中：provide('theme', reactive({ mode: 'dark', primary: '#409eff' }))
• Menu.vue 中：const theme = inject('theme')，模板里直接用 {{ theme.primary }}
• 不需要在 Layout.vue、Sidebar.vue 等中间层做任何转发，代码更干净，改主题只需动一处