elementUI 自定义表单组件v-model 无法触发表单校验

问题:自定义组件无法触发表单校验

在我们使用elementUI组件库时,后台管理系统有时候会有自己自己的素材库,就像这样

父组件的代码是这样的:

<el-form-item label="购买海报" prop="buyPoster">
	<single-pic v-model="wxAccountForm.buyPoster" type="image" :num="1" :width="100" :height="100" />
</el-form-item>

子组件的代码是这样的:

export default {
    name: 'singlematerial',
    model:{
        //指定v-model的值 默认值是value
        prop:"src",
        //指定触发事件 默认值是 input
        event:"setvalue"
    }
    computed: {
        myValue:{
            get(){
                return this.src
            },
            set(val){
                this.$emit('setvalue', val)
            }
        }
    }
}

我们选择了图片之后 没有触发校验函数 所以就会提示校验错误信息 后来我翻了elementUI源码,结果有重大发现, 发现input select

el-select源码

el-input源码

于是我就好奇这个dispatch是何方函数,我们都知道要触发表单校验这些表单组件一定会包裹在el-form组件里的el-form-item里 所以在我不懈努力下终于找到了

利用while循环找到我们组件的父元素 然后触发它的自定义事件完成绑定值的校验 我们完全可以把这个函数复制到我们的组件代码中,然后赋值的时候调用就完成了.

解决方案

  //方法
 dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

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

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    }
  //使用
  dispatch('ElFormItem', 'el.form.change', [val])