vue3父组件直接拿到子组件中的form表单数据

在Vue3中，可以通过使用`ref`来获取子组件中的数据和方法。具体步骤如下：
1. 在子组件中，使用`ref`给表单元素添加一个引用。
2. 在父组件中，使用`ref`获取子组件的引用。
3. 通过子组件的引用，可以直接访问子组件中的数据和方法。

下面是一个示例代码，假设子组件中有一个表单，包含两个输入框，分别是姓名和年龄，父组件需要获取这两个输入框中的数据：

子组件代码：

<template>
  <div>
    <input type="text" v-model="name" ref="nameInput">
    <input type="text" v-model="age" ref="ageInput">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <button @click="getData">获取数据</button>
  </div>
  <child-component ref="child"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData() {
      const name = this.$refs.child.$refs.nameInput.value
      const age = this.$refs.child.$refs.ageInput.value
      console.log(`姓名：${name}，年龄：${age}`)
    }
  }
}
</script>

在上面的代码中，父组件中通过`ref`获取了子组件的引用，并通过子组件的引用访问了子组件中的输入框元素，从而获取了输入框中的数据。