el-form表单验证穿透到子组件得了

在Vue.js中，`el-form`是一个基于Element UI的表单组件，用于组织和管理输入字段的验证。当你需要在深层嵌套的子组件中进行表单验证时，可能会遇到验证穿透（prop validation）的问题。

验证穿透是指父组件通过props传递给子组件的rules规则可以自动应用到子组件中的input元素上，使得用户可以直接在浏览器控制台看到验证错误，无需手动触发validate方法。要实现这个功能，你需要确保：

1. 子组件接收并处理props：将验证规则作为props从父组件传给子组件，并在子组件的methods里处理`this.$refs`引用的input元素的验证。

<template>
  <el-input v-model="inputValue" :rules="parentRules" ref="inputField"></el-input>
</template>

<script>
export default {
  props: ['parentRules'],
  methods: {
    validate() {
      this.$refs.inputField.validate();
    }
  }
}
</script>

2. 父组件监听子组件的验证状态：你可以设置一个watcher来观察子组件的验证结果，以便在父级组件中显示错误信息。

data() {
  return {
    childErrors: ''
  };
},
watch: {
  'child.$valid': {
    handler(newValue) {
      if (!newValue) {
        this.childErrors = this.getChildErrorMessage();
      } else {
        this.childErrors = '';
      }
    },
    deep: true
  }
},
methods: {
  getChildErrorMessage() {
    // 获取子组件的具体错误信息
  }
}