为什么自己封装的表单组件，不能实时监听表单校验呢？

Question

为什么自己封装的表单组件，不能实时监听表单校验呢？

封装方式还是 封装change value，并且封装 v-model

正常点击提交还是能校验，但是更改自定义表单组件的数据时候不能实时的进行校验；

现在通过在父组件调用时，watch中监听可以实时校验成功，但是为什么，不watch就不能校验呢？

请了解过相关源码的大佬赐教

Answer 1

你没说UI库，就当你是element-ui了。需要在你组件想要验证（blur,change）时，通知el-form-item进行验证

// this.dispatch 需要从element-ui源码引入mixin
this.dispatch(this, 'ElFormItem', 'el.form.blur', [this.value]);

如果闲找不到源码，可以用下下面的

function elementUiDispatch(
  vueContext: any,
  componentName: string,
  eventName: string,
  params: any
) {
  let parent = vueContext.$parent || vueContext.$root;
  let name = parent.$options.componentName;

  while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
      name = parent.$options.componentName;
    }
  }
  if (parent) {
    const args = [eventName].concat(params);
    parent.$emit.apply(parent, args);
  }
}