脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3  provide inject父子传值

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父子组件传值传不过去且传递后子组件不具备响应性的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论