vue3 <script setup> 方式下，父组件通过ref获取子组件的属性

vue3网上的教程都是setup()方式的，使用<script setup> 方式时略有不同。

 

父组件：

<Son ref="sonRef" />

<script setup>
 import {ref} from 'vue'
 const sonRef = ref()
 console.log(sonRef.value.name)
</script>

 

子组件：

<script setup>
 const name = alpiny
 defineExpose({name}) // 重点！
</script>

 

喜欢script-setup这种模式的，可以读一下文档：

github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md