Vue3+TypeScript组合式API：父组件如何获取子组件数据？

### 2. 父组件（App.vue）：正确绑定ref并访问
父组件中声明ref绑定到子组件标签，且要在组件挂载完成后（比如`onMounted`钩子）或用户交互事件中访问ref值，避免未挂载导致的undefined：
```vue
<template>
  <div>
    <BookForm ref="bookRef" />
    <button @click="getSubData">获取子组件数据</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BookForm from './BookForm.vue'

// TS环境下指定ref类型，获得类型提示
const bookRef = ref<InstanceType<typeof BookForm> | null>(null)

// 组件挂载后访问，确保子组件已实例化
onMounted(() => {
  if (bookRef.value) {
    console.log('挂载后子组件书名：', bookRef.value.bookName)
  }
})

// 点击事件中访问子组件数据
const getSubData = () => {
  if (bookRef.value) {
    console.log('子组件书名：', bookRef.value.bookName)
    console.log('子组件价格：', bookRef.value.bookPrice)
    // 调用子组件暴露的方法
    bookRef.value.resetForm()
  }
}
</script>