Vue 父组件校验子组件方法：使用 $refs 和 props 实现验证

在 Vue 中，父组件可以通过 $refs 属性访问子组件实例，从而调用子组件的方法。同时，可以通过 props 向子组件传递数据，然后在子组件中进行校验。

以下是一个示例：

父组件：

<template>
  <div>
    <child ref="child"></child>
    <button @click="validate">Validate</button>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    validate() {
      const isValid = this.$refs.child.validate()
      if (isValid) {
        alert('Validation passed')
      } else {
        alert('Validation failed')
      }
    }
  }
}
</script>

子组件：

<template>
  <div>
    <input v-model="name">
  </div>
</template>

<script>
 export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    validate() {
      if (this.name === '') {
        return false
      }
      return true
    }
  }
}
</script>

在父组件中，通过 $refs 属性获取子组件实例，并调用 validate 方法。在子组件中，通过 props 接收父组件传递的数据，并在 validate 方法中进行校验。

需要注意的是，这种方法并不是官方推荐的方式，因为它破坏了组件的封装性。更好的做法是使用事件或者插槽来进行通信。