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

目录

传值过程，代码

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

 问题解决：

总结：

---

传值过程，代码

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

子组件Son如下：

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

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

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

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

父组件如下：

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

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

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

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

但是报错了。

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

 

 问题解决：

Sons.value?.['toF']

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

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

 打印：

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

总结：

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

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