Vue3 setup中父组件使用ref取子组件传的值并解决报错:类型“never”上不存在属性“xxx”。

目录

传值过程,代码

问题描述:类型“never”上不存在属性“xxx”。

 问题解决:

总结:


传值过程,代码

定义了父子组件,进行子传父的emit传值。

子组件Son如下:

Vue3 setup中父组件使用ref取子组件传的值并解决报错:类型“never”上不存在属性“xxx”。_第1张图片

然后父组件   @on-click=‘方法名’   接收,比如

const getMsgFronSon = (toF:string)=> {
    log(toF)
}

//声明要取得值是toF,类型string

但是还可以用ref命名引用的子组件来通过像以前的this.$refs.name.value一样来取得value值从而取到子组件传的值toF。 

父组件如下:

Vue3 setup中父组件使用ref取子组件传的值并解决报错:类型“never”上不存在属性“xxx”。_第2张图片

tips:此时如果我们直接取值Son.value是取不到任何值的,因为如果通过ref来取子组件传过来的值的话子组件是不对外暴露的,因此我们要在子组件中使用defineExpose({toF})来暴露toF。才能通过这种方法取值。如第一张图最后部分使用了defineExpose。

使用了defineExpose。打印Sons.value如下。

Vue3 setup中父组件使用ref取子组件传的值并解决报错:类型“never”上不存在属性“xxx”。_第3张图片

 可以看到已经通过使用ref来命名引用的子组件,然后通过.value的方式取到toF的值了。

按照正常的理解我们点 "." 出来就可以了,Sons.value.toF。

但是报错了。

问题描述:类型“never”上不存在属性“xxx”。

Vue3 setup中父组件使用ref取子组件传的值并解决报错:类型“never”上不存在属性“xxx”。_第4张图片

 

 问题解决:

Sons.value?.['toF']

使用 Sons.value?.['toF'],这种 [ ] 访问属性的方式就可以了,不要忘记那个" . "还在的,不是

value['toF'],是value.['toF']。

 打印:

Vue3 setup中父组件使用ref取子组件传的值并解决报错:类型“never”上不存在属性“xxx”。_第5张图片

 成功完成使用ref来完成子传父的目的。

总结:

1.首先在子组件中使用defineEmits定义emit并定义事件名称,然后定义传值的方法,通过例如点击来触发方法从而调用emit来把值绑到事件上传给父组件。并且在最后通过defineExpose({})来暴露你想给ref看到的值

2.父组件中通过在子组件标签内使用@来接收事件,并且给子组件使用ref赋值,然后在setup中使用ref(null)声明该值。接收事件后触发的方法中使用  ref赋值.value.['值'] 来接收子组件传过来的值。在本文中为Sons.value.['toF']。

你可能感兴趣的:(前端学习,前端,javascript,vue)