vue3 方式下,父组件通过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