自定义组件主动触发el-form校验

[原文]（https://zhuanlan.zhihu.com/p/390466860）

因为在我们自定义的组件内部没有触发el.form.blur和el.form.change这两个事件，所以想要使用 el-form, el-form-item 组件的表单校验功能，组件内部必须要用包裹它的el-form-item组件$emit el.form.blur和el.form.change。
实际应用如下 (blur 和 change 事件可根据需求选择使用)

  <template>
    <el-form :model="formData" :rule="rules" ref="formRef">
        <el-form-item label="内容" prop="inputValue" ref="inputValueRef"> <!-- 添加ref,   用来调用$emit -->
            <my-input v-model="formData.inputValue" @blur="$refs.inputValueRef.$emit('el.form.blur',$event)" @change="$refs.inputValueRef.$emit('el.form.change',$event)"></my-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</template>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容