vue3 provide与inject 。vue3 跨越组件传递参数，传参。父子组件传值，爷孙组件传参。跨层级传值，整个组件树中共享传值

44人阅读 2024/8/20 22:41 总访问：4700090 评论：0 收藏：0 手机

分类: 前端

在 Vue 3 中，provide 和 inject 是用于实现跨组件通信的 API，特别是当组件层次结构较深时很有用，不然如果层级太深了要一级一级的往下传比较麻烦，用provide 和inject，可以在整个组件树中共享。

[TOC]

### 基础使用

#### 父组件
父组件赋值之后可以在整个组件树中都获取到值，后代子组件都能获取到值
```
<script lang="ts" setup>
import { reactive,provide  } from 'vue'

const provideData = reactive({
    stid: "",
    schoolId:"",
    schoolName:""
})

provide('schoolInfo', provideData); 

</script>
```

####  子组件，或者说是后代组件中

```
<script lang="ts" setup>
import { inject } from 'vue'

const schoolInfo:any = inject('schoolInfo'); 

</script>
```

### 注意，要想子组件监听到变化，应该监听响应式对象的引用，而不是一个值，特别是想要提供的值是异步方法调用之后提供的

#### 这样提供的值子组件获取不到
因为state虽然是响应式对象，但是state.userList不是，所以子组件获取到的值只是初始化的空值
```
const state = reactive({
    ......其他字段
	userList:[]
});
provide('userList', state.userList); 


onMounted(() => {
	getUserList()
});

const getUserList = async()=>{
	const result: any = await request.get('/xx/api/useraccount/GetUserListByTenantID');
	state.userList = result.data
}
```
#### 这样监听响应式对象的引用是可以的
```
const userListRef = reactive({ value: [] });
provide('userList', userListRef); 

onMounted(() => {
	getUserList()
});

const getUserList = async()=>{
	const result: any = await request.get('/xx/api/useraccount/GetUserListByTenantID');
	userListRef.value = result.data
}
```
在第二种方法中，创建了一个响应式对象 userListRef，它有一个 value 属性，初始值为空数组。然后，你在 setup 函数中调用了 provide('userList', userListRef)，将 userListRef 提供给子组件。由于 userListRef 是一个响应式对象，并且提供的是这个对象的引用，所以当 userListRef.value 被更新时，所有通过 inject 获取到 userListRef 的子组件都会接收到更新后的引用，并且可以访问到新的 value。

#### 总结一下

tn2>当使用 provide 和 inject 时，你应该提供响应式对象的引用，而不是对象的直接属性（如数组或对象内部的字段）。这是因为 Vue 的响应式系统是基于引用追踪的，而不是基于值比较的。当你提供一个对象的引用时，Vue 能够追踪到这个对象的变化，并通知所有依赖这个对象的子组件。而当你直接提供一个属性（如数组）时，Vue 无法追踪到这个属性的变化（除非这个属性本身是一个响应式引用）。
因此，在你的情况下，你应该继续使用第二种方法，即通过提供一个响应式对象的引用来使用 provide 和 inject。

#### 注意不能直接在异步请求里边使用provide
比如这种写法：
```
const getUserList = async()=>{
	const result: any = await request.get('/xx/api/useraccount/GetUserListByTenantID');

	// 不能在请求里边直接使用provide，子组件获取不到这个接口返回的值
	provide('userList',result.data);
}
```

在 Vue 3 的 Composition API 中，你不能在异步函数（如 API 请求回调）内部直接调用 provide 并期望它立即对已经渲染的子组件生效。provide 是在组件的 setup 函数中调用的，它设置了当前组件提供的依赖项，这些依赖项对于在 setup 函数执行期间或之后创建的子组件是可见的。

当你在异步函数（如 getUserList）中调用 provide 时，如果这个函数是在 setup 函数之外或之后调用的，那么它提供的值可能不会被已经渲染的子组件所接收。这是因为子组件的 setup 函数和渲染过程可能已经在父组件的 setup 函数执行完毕并且 provide 被调用之前就完成了。

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue3 provide与inject 。vue3 跨越组件传递参数，传参。父子组件传值，爷孙组件传参。跨层级传值，整个组件树中共享传值

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}