『element-ui 2』如何写ElForm组件，触发ElForm校验

有这么一个需求：有一张表单，表单中要上传图片。要符号UI，于是我写了一个上传图片的组件。图片为必填，如果先被触发了必填，再上传图片，红色的必填提示无法消失。

1

首先，简单的，我以为ElForm绑定了数据，ElFormItem绑定了属性，那ElFormItem可能直接watch了属性。于是将图片属性显性地写进了 data form对象。额，没用。

于是，我记得ElFormItem 源码中监听了 change事件，去 github => element-ui => v2.15.7 => 目录element/packages/form/src/form-item.vue

果然。

2

我能直接触发吗？我记得vue $emit 是组件内触发，无法跨级，去 github => vue => v2.6.14 => 目录vue/src/core/instance/events.js

果然，event 存进了实例 _events

3

有监听，就肯定有触发，记得再element-plus就把触发写地很明显，element2应该也一样。找一个表单组件：ELInput 组件看看

4

用了dispatch，哪来的？没搜索到，我记得之前看到一个mixin文件夹，一定是mixin进来的，并且不会直接全局mixin，那一定组件内mixin。果然。

确实是element/src/mixins/emitter.js文件mixin进来的

5

问题来了，我可以用吗？或者说本地有这个文件吗？看一下element-ui包

package.json文件files字段是包含src文件夹的，说明npm install安装的时候会直接将src下载下来，一定包含 mixin 文件。那就开始用吧。

6

模仿ElInput：

import emitter from 'element-ui/src/mixins/emitter'

export default {
	mixins: [emitter],
        ...
        
            this.dispatch('ElFormItem', 'el.form.change', [value])
            ...

在图片设置完成时触发el.form.change

最后看一下 dispatch 方法，是不断向上查找，找到触发。

OVER.