vue 父组件不通过按钮获取子组件from表单数据

在 Vue 中，父组件可以通过 `ref` 属性获取子组件的实例，然后调用子组件的方法来获取子组件的 form 表单数据。具体步骤如下：

1. 在子组件中，将 form 表单数据绑定到 data 属性中：

<template>
  <form>
    <input type="text" v-model="formData.username">
    <input type="password" v-model="formData.password">
    <!-- 其他表单项 -->
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  }
}
</script>

2. 在子组件中，定义一个获取 form 表单数据的方法 `getFormData()`：

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    getFormData() {
      return this.formData;
    }
  }
}
</script>

3. 在父组件中，使用 `ref` 属性获取子组件实例，并调用子组件的 `getFormData()` 方法获取表单数据：

<template>
  <div>
    <my-form ref="myForm"></my-form>
    <button @click="handleClick">获取表单数据</button>
  </div>
</template>

<script>
import MyForm from './MyForm.vue';

export default {
  components: {
    MyForm
  },
  methods: {
    handleClick() {
      const formData = this.$refs.myForm.getFormData();
      console.log(formData);
    }
  }
}
</script>

这样，点击按钮就可以在控制台中输出子组件的 form 表单数据了。