4. 设计校验规则
在上面设计的组件中，我们知道校验当前项和展示错误信息的工作是在
FormItem 组件中，但是数据的变化是在
Input 组件中，所以
FormItem 和
Input 组件是有数据传递的。当
Input 中的数据变化时，要告诉
FormItem ，让
FormItem 进行校验，并展示错误。首先，我们修改一下
Input 组件：
methods: {
handlerInput(event) {
this.valueInInput = event.target.value;
this.$emit("input", this.valueInInput); // 数据变了，定向通知 FormItem 校验
this.dispatch('EFormItem', 'validate', this.valueInput);
},
// 查找指定 name 的组件，
dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
}
}
这里，我们不能用
this.$emit 直接派发事件，因为在
FormItem 组件中，
Input 组件的位置只是一个插槽，无法做事件监听，所以此时我们让
FormItem 自己派发事件，并自己监听。修改
FormItem 组件，在
created 中监听该事件。
created() {
this.$on('validate', this.validate);
}当
Input 组件中的数据变化时，
FormItem 组件监听到
validate 事件后，执行
validate 函数。下面，我们就要处理我们的
validate 函数了。而在 ElementUI 中，验证用到了一个底层库async-validator，我们可以通过
npm 安装这个包。
npm i async-validator
async-validator 是一个可以对数据进行异步校验的库，具体的用法可以参考上面的链接。我们通过这个库来完成我们的
