关于前端:vue3-使用provide-inject父子组件传值传不过去且传递后子组件不具备响应性

1. 一般传值
传递一般值，间接父级

provide(/ 注入名 / ‘message’, / 值 / ‘hello!’)
子级：

const message = inject(‘message’)
2. 通过 axios 异步获取数据后传值
问题：在我的项目中个别是通过接口申请到数据后再传递给子级，provide 和 inject 如果间接再调用接口的办法内传值会报正告，而且值也传递不过来。就是说 provide()必须在 setup 根节点处能力应用，在办法外面用是不行的

然而，间接在 setup 根节点处传递，因为数据是异步获取的，间接传递时数据是还没有值的，传递过来的都是申明时的初始值。

解决：应用办法包装须要传递的值，而后 provide()传递过来的是办法，inject()时通过办法调用获取值

父级：

const provideData = () =>{
return {

columns: columns.value,
data: resourceData.value,
pageNum: pageNum.value,
total: total.value,
pageSize: pageSize.value

}
}
provide(‘provideData’,provideData);
子级获取：

const provideData = inject(‘provideData’);
const columns = provideData().columns;
const data = provideData().data;
const total = provideData().total;
const pageNum = provideData().pageNum;
const pageSize = provideData().pageSize;
3. 父组件值更改后，子组件的值不具备响应性
vue 自身就是这样设计的，注入后子组件的值不具备响应性，然而咱们能够进行解决

3.1 以办法模式传递值
const provideData = () =>{
return {

columns: ()=>columns.value,
data: ()=>resourceData.value,
pageNum: ()=>pageNum.value,
total: ()=>total.value,
pageSize: ()=>pageSize.value

}
}
provide(‘provideData’,provideData);
子组件中再通过办法进行调用：

const provideData = inject(‘provideData’);
const columns = computed(() => provideData().columns())
const data = computed(() => provideData().data())
const total = computed(() => provideData().total())
const pageNum = computed(() => provideData().pageNum())
const pageSize = computed(() => provideData().pageSize())
3.2 以对象模式传递值
父组件：

const provideData = () =>{
return {

data:{
  columns: columns.value,
  data: resourceData.value,
  pageNum: pageNum.value,
  total: total.value,
  pageSize: pageSize.value
}

}
}
provide(‘provideData’,provideData);
子组件：

const provideData = inject(‘provideData’);
const columns = computed(() => provideData().data.columns)
const data = computed(() => provideData().data.data)
const total = computed(() => provideData().data.total)
const pageNum = computed(() => provideData().data.pageNum)
const pageSize = computed(() => provideData().data.pageSize)
————————————————
这里感激 Jyann 博主的文章给予的帮忙, 在这里贴上链接, 外面的内容更加的全面, 大家有相干问题能够查阅原文链接：https://blog.csdn.net/qq_34569497/article/details/129751537