vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue  provide与inject

Vue中的provide与inject用法详解

作者：fmk1023

provide 与 inject 是 Vue 提供的跨组件通信方案,用于解决多层级组件（父子、祖孙、更深层级）之间的数据传递问题,本文给大家介绍Vue中的provide与inject用法,感兴趣的朋友跟随小编一起看看吧

provide 与 inject 核心功能

provide 与 inject 是 Vue 提供的跨组件通信方案，用于解决多层级组件（父子、祖孙、更深层级）之间的数据传递问题。其核心功能是：

Vue2 中的用法

Vue2 中 provide 与 inject 以组件选项（Options API）的形式使用。

1. 基本用法

示例：

<!-- 父组件（Grandparent.vue） -->
<template>
  <div>父组件</div>
  <Parent />
</template>
<script>
import Parent from './Parent.vue'
export default {
  components: { Parent },
  // provide 可以是对象或函数（函数更灵活，可访问 this）
  provide() {
    return {
      theme: 'dark', // 非响应式数据
      user: this.currentUser // 可传递组件内数据（需注意响应式）
    }
  },
  data() {
    return {
      currentUser: { name: '张三' }
    }
  }
}
</script>
<!-- 子组件（Child.vue，层级：Grandparent -> Parent -> Child） -->
<template>
  <div>
    主题：{{ theme }}
    用户名：{{ user.name }}
  </div>
</template>
<script>
export default {
  // inject 可以是字符串数组（直接指定 key）
  // inject: ['theme', 'user']
  // 也可以是对象（支持默认值、重命名）
  inject: {
    theme: {
      from: 'theme', // 对应 provide 的 key（可选，默认与属性名一致）
      default: 'light' // 未提供时的默认值
    },
    userName: {
      from: 'user', // 注入 user 数据
      default: () => ({ name: '匿名' }) // 默认值为对象时需用函数返回
    }
  }
}
</script>

2. 响应式处理（Vue2 关键注意点）

Vue2 中 provide 提供的数据默认是非响应式的。若需要响应式，需通过以下方式：

示例（响应式改造）：

<!-- 父组件 -->
provide() {
  return {
    // 传递响应式对象（data 中的属性）
    appState: this.appState
  }
},
data() {
  return {
    appState: {
      theme: 'dark', // 响应式
      user: { name: '张三' }
    }
  }
}
<!-- 子组件修改后，父组件会同步更新 -->
this.appState.theme = 'light' // 有效（响应式）

Vue3 中的用法

Vue3 中 provide 与 inject 主要通过 Composition API 实现（在 setup 函数或 <script setup> 中使用），同时支持响应式传递。

1. 基本用法（<script setup>）

示例：

<!-- 父组件（Grandparent.vue） -->
<template>
  <div>父组件</div>
  <Parent />
</template>
<script setup>
import { provide } from 'vue'
import Parent from './Parent.vue'
// 提供数据（可直接提供基本类型或对象）
provide('theme', 'dark')
// 提供响应式数据（ref/reactive）
const user = { name: '张三' }
provide('user', user)
</script>
<!-- 子组件（Child.vue） -->
<template>
  <div>
    主题：{{ theme }}
    用户名：{{ user.name }}
  </div>
</template>
<script setup>
import { inject } from 'vue'
// 注入数据（指定 key）
const theme = inject('theme', 'light') // 第二个参数为默认值
const user = inject('user', () => ({ name: '匿名' })) // 默认值为对象时建议用函数
</script>

2. 响应式处理（Vue3 优势）

Vue3 中，若 provide 传递的是 响应式数据（ref 或 reactive），则 inject 后的数据会保持响应式（修改时自动更新）。

示例（响应式传递）：

<!-- 父组件 -->
<script setup>
import { provide, ref, reactive } from 'vue'
// ref 响应式（基本类型）
const theme = ref('dark')
provide('theme', theme)
// reactive 响应式（对象）
const user = reactive({ name: '张三' })
provide('user', user)
// 父组件修改，子组件会同步更新
setTimeout(() => {
  theme.value = 'light'
  user.name = '李四'
}, 2000)
</script>
<!-- 子组件 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
const user = inject('user')
// 子组件修改响应式数据，父组件也会同步（若需禁止，可用 readonly）
// const user = inject('user') // 可修改
// const user = readonly(inject('user')) // 只读，防止子组件修改
</script>

3. 类型提示（TypeScript）

Vue3 中可通过 InjectionKey 实现类型约束（避免 key 冲突和类型错误）：

// keys.ts
import type { InjectionKey } from 'vue'
export const themeKey: InjectionKey<string> = Symbol('theme')
export const userKey: InjectionKey<{ name: string }> = Symbol('user')
// 父组件
import { provide } from 'vue'
import { themeKey, userKey } from './keys'
provide(themeKey, 'dark') // 类型约束：必须是 string
provide(userKey, { name: '张三' }) // 类型约束：必须符合 { name: string }
// 子组件
import { inject } from 'vue'
import { themeKey, userKey } from './keys'
const theme = inject(themeKey, 'light') // 类型：string
const user = inject(userKey) // 类型：{ name: string } | undefined

使用场景

  1. 多层级共享配置：如主题（深色/浅色）、语言切换、全局权限等（跨组件共享的静态或低频变化数据）。
  2. 插件/库内部通信：插件向子组件传递配置或方法（如 UI 组件库中，父组件向深层级子组件传递尺寸、样式等）。
  3. 避免 props 钻取：当组件层级较深（如 5 层以上），用 provide/inject 替代 props 逐级传递，减少代码冗余。

不适合的场景：

基本原理

provide 与 inject 基于 Vue 的组件实例树实现，核心逻辑如下：

  1. 数据存储：每个组件实例（vm）会维护一个 provides 对象，用于存储当前组件通过 provide 提供的数据。
  2. 查找链构建：当组件初始化时，会继承父组件的 provides（形成一个原型链/查找链）。即：子组件的 provides 以父组件的 provides 为原型，以此类推。
  3. 注入查找：当子组件通过 inject 查找数据时，会沿着组件实例的 provides 链向上遍历，直到找到匹配的 key 或到达根组件。

响应式原理：

总结

特性Vue2（Options API）Vue3（Composition API）
用法组件选项 provide（对象/函数）、inject（数组/对象）导入 provide/inject 函数，在 setup 中调用
响应式需手动传递响应式对象（如 data 中的属性）原生支持 ref/reactive 响应式传递
类型支持较弱（需手动注释）可通过 InjectionKey 实现强类型约束
灵活性依赖组件选项，灵活性较低可在 setup 中动态提供/注入，灵活性更高

核心作用一致：跨层级通信，减少 props 传递成本，适用于共享低频变化的全局配置或插件内部通信。

到此这篇关于Vue中的provide与inject的文章就介绍到这了,更多相关vue provide与inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文