在vue中setup里面获取不到ref

211 阅读1分钟

这个主要针对的是在script标签里面的setup情况。

问题

<script setup>中使用ref获取子组件属性和方法时,获取不到,但是把setup单独写出来后就可以获取到了

//通过ref获取子组件的属性和方法
<Register ref="registerRef" />
 .....
 <script setup>
 .....
 const toggle = () => {
    registerRef.value.toggle()
    //获取不到子组件的toggle方法
}
 </script>

解决

使用 script setup 的组件默认是关闭的

如果需要公开,需要在子组件内使用 defineExpose 把需要获取的ref暴露出来

//在子组件中暴露toggle
defineExpose({ 
    toggle 
})

在script标签里面的setup获取不到当前组件表单的ref,也可以通过暴露ref来获取到。