vue3 使用provide inject父子组件传值失败且子组件不响应
更新时间：2023年08月22日 14:23:26 作者：_Jyann_
这篇文章主要介绍了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本身就是这样设计的，注入后子组件的值不具有响应性，但是我们可以进行处理
以方法形式传递值
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())以对象形式传递值
父组件：
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)以上就是vue3 使用provide inject父子组件传值传不过去且传递后子组件不具备响应性的详细内容，更多关于vue3 使用provide inject父子组件传值传不过去且传递后子组件不具备响应性的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
相关文章
Vue 3带来的最大变革之一就是组合式API,不仅解决了Options API在大型项目中的局限性,更为开发者提供了一种更灵活、更优雅的代码组织方式,下面小编就为大家简单介绍一下吧2025-11-11
VSCode Vue开发推荐插件和VSCode快捷键(小结)
这篇文章主要介绍了VSCode Vue开发推荐插件和VSCode快捷键(小结)，文中通过图文表格介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求，重复发送多次请求，本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法，感兴趣的可以了解一下2022-02-02
在本篇文章里小编给大家分享的是关于vue开发中遇到的问题总结，有兴趣的朋友们可以学习参考下。2020-04-04
这篇文章主要为大家详细介绍了Vue3中数据响应式原理与高效数据操作的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-02-02
这篇文章主要介绍了vue滚动固定顶部及修改样式，本文给大家提到了滚动固定位置有多种方法,感兴趣的朋友跟随小编一起看看吧2019-05-05
在vue中获取wangeditor的html和text的操作
这篇文章主要介绍了在vue中获取wangeditor的html和text的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要来和大家分享一些关于 Vue3中Hooks封装的技巧,希望能够为大家在 Vue 3 项目中更好地利用 Hooks 提供一些思路和实践经验2023-12-12
这篇文章主要介绍了iview实现select tree树形下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
本篇文章主要介绍了Vue 获取数组键名的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论