vue 父组件如何获取子组件校验

在 Vue 中，父组件可以通过 `$refs` 访问子组件的实例，然后调用子组件的方法来获取校验结果。你可以在子组件中定义一个名为 `validate` 的方法，该方法返回一个布尔值，表示子组件的校验结果。

在父组件中，你可以通过 `$refs` 访问子组件的实例，并调用 `validate` 方法来获取校验结果。例如：

<!-- 子组件 -->
<template>
  <div>
    <input v-model="value" @blur="validate">
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    validate() {
      // 校验逻辑...
      return true; // 返回校验结果，这里简单地返回 true
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child ref="child"></child>
    <button @click="submit">提交</button>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  methods: {
    submit() {
      const isValid = this.$refs.child.validate(); // 获取子组件的校验结果
      if (isValid) {
        // 校验通过，提交表单
      } else {
        // 校验不通过，提示用户
      }
    },
  },
};
</script>

在上面的代码中，父组件通过 `ref` 属性引用了子组件，并在 `submit` 方法中调用子组件的 `validate` 方法来获取校验结果。如果校验通过，就提交表单，否则就提示用户。