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

在 Vue 3 中，provide 和 inject 是用于实现跨组件通信的 API，特别是当组件层次结构较深时很有用，不然如果层级太深了要一级一级的往下传比较麻烦，用provide 和inject，可以在整个组件树中共享。

基础使用

父组件

父组件赋值之后可以在整个组件树中都获取到值，后代子组件都能获取到值

<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。

总结一下

当使用 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 被调用之前就完成了。