VUE3 provide 和 inject，跨越多层级组件传递数据

Libby博仙

于 2025-01-12 11:33:46 发布

阅读量494

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_41192896/article/details/145090887

版权

provide 和 inject 是 Vue 3 提供的 API，主要用于实现祖先组件与后代组件之间的依赖注入。它们可以让你在组件树中，跨越多层组件传递数据，而不需要通过 props 或事件的方式逐层传递。这个机制主要用于状态共享、插件系统或某些跨层级的功能。

1. `provide`

provide 用来在祖先组件中提供数据或方法，这些数据和方法可以被任何后代组件注入。它可以在组件的 setup 函数中使用。

使用 `provide`：

在父组件或祖先组件中，调用 provide 来提供数据或方法。
这些提供的数据可以在后代组件中被注入。

2. `inject`

inject 用来在后代组件中注入祖先组件提供的数据或方法。inject 也必须在 setup 函数中使用。

示例：

父组件（提供数据）

<template>
  <ChildComponent />
</template>

<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

// 提供一个数据给后代组件
const message = "Hello from Parent!"
provide('message', message)
</script>

子组件（注入数据）

<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { inject } from 'vue'

// 注入父组件提供的数据
const message = inject('message')
</script>

解释：

父组件 使用 provide 提供一个名为 message 的数据。
子组件 使用 inject 注入这个名为 message 的数据。

详细说明：

`provide`：

provide 用来在组件中设置要共享的数据。
可以共享任何类型的值，包括对象、数组、函数、字符串等。
它是在组件的 setup() 函数中使用的（或者 Vue 2.x 中的 beforeCreate 和 created 生命周期钩子中）。

import { provide } from 'vue';

provide('key', value);

`inject`：

inject 使得子组件能够访问祖先组件通过 provide 提供的数据。
inject 可以在后代组件的 setup() 函数中使用。
inject 会查找父组件中使用 provide 提供的数据，并返回给当前组件。

import { inject } from 'vue';

const value = inject('key');

高级用法：

1. 默认值

如果父组件没有提供某个值，inject 可以通过第二个参数提供默认值。

// 父组件中不提供 message
<template>
  <ChildComponent />
</template>

<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

provide('message', 'Message from Parent') // 不传 message 时，使用默认值
</script>

// 子组件中使用 inject
<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { inject } from 'vue'

// 如果父组件没有提供 message，使用默认值
const message = inject('message', 'Default Message')
</script>

2. 注入多个值：

可以注入多个值，甚至通过对象的方式一次性提供多个数据。

// 父组件
<template>
  <ChildComponent />
</template>

<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

provide('state', { message: 'Hello', count: 10 })
</script>

// 子组件
<template>
  <p>{{ state.message }}</p>
  <p>{{ state.count }}</p>
</template>

<script setup>
import { inject } from 'vue'

const state = inject('state')
</script>