自定义组件实现v-model,并通过element的form表单校验

做项目时，我们经常会遇到表单项不单单是input,select框这些基础表单项，有时候会在表单里出现一些较为复杂的自定义组件，比如下图中的插槽类型组件：

 

 

插槽组件我实现了v-model的用法，代码如下：

slotTypeSelector:

<template>
  <div class="item-list">
    <div
      class="item"
      :class="activeSlotType === '1' ? 'actived' : ''"
      @click="handleSelectSlotType('type1', '1')"
    >
      <dv-border-box-11 ref="type1" title="标题"></dv-border-box-11>
    </div>
    <div
      class="item"
      :class="activeSlotType === '2' ? 'actived' : ''"
      @click="handleSelectSlotType('type2', '2')"
    >
      <dv-border-box-4 ref="type2">
        <!-- <div class="title">标题</div> -->
      </dv-border-box-4>
    </div>
    <div
      class="item"
      :class="activeSlotType === '3' ? 'actived' : ''"
      @click="handleSelectSlotType('type3', '3')"
    >
      <dv-border-box-10 ref="type3"></dv-border-box-10>
    </div>
    <div
      class="item"
      :class="activeSlotType === '4' ? 'actived' : ''"
      @click="handleSelectSlotType('type4', '4')"
    >
      <dv-border-box-13 ref="type4">
        <!-- <div class="title">标题</div> -->
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
export default {
  name: "SlotTypeSelector",
  components: {},
  model: {
    prop: 'slotType',
    event: 'change'
  },
  props: {
    slotType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeSlotType: this.slotType,
    };
  },

  computed: {},
  watch: {
    slotType(newV, oldV) {
      this.activeSlotType = newV;
    },
  },
  mounted() {},

  methods: {
    handleSelectSlotType(ref, type) {
      this.activeSlotType = type;
      this.$refs[`${ref}`].initWH();
      this.$emit("change", this.activeSlotType);
    },
  },
};
</script>
<style lang="scss" scoped>
.item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .item {
    width: 500px;
    height: 270px;
    margin: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    ::v-deep .dv-border-box-4 .border-box-content .title {
      position: absolute;
      left: 40px;
      top: 20px;
      font-size: 18px;
    }
    ::v-deep .dv-border-box-13 .border-box-content .title {
      position: absolute;
      left: 13px;
      top: 13px;
      font-size: 18px;
    }
  }
  .actived {
    border: 6px solid rgb(139, 190, 232);
  }
}
</style

父组件使用方式如下：

 <div id="slotDetails">
    <jhe-dialog-schema-form
      ref="slotRuleForm"
      :model="dialogFormData"
      :schema="dialogFormSchema"
      :options="dialogFormOptions"
      :dialog-visible="dialogVisible"
      :dialog-form-title="dialogFormTitle"
      :dialog-form-width="dialogFormWidth"
      :label-position="labelPosition"
      :rules="rules"
      @beforeClose="beforeClose"
    >
      <el-form-item
        slot="slotType"
        ref="slotTypeRef"
        label="插槽类型"
        label-width="100px"
        prop="slotType"
      >
        <slot-type-selector v-model="dialogFormData.slotType" @change="handleSlotTypeChanged"></slot-type-selector></el-form-item>
      <div slot="dialog-form-footer">
        <jhe-button @click="submitForm('slotRuleForm')">保 存</jhe-button>
        <jhe-button @click="previewSlot('slotRuleForm')">预 览</jhe-button>
        <jhe-button @click="beforeClose">关 闭</jhe-button>
      </div>
    </jhe-dialog-schema-form>

此时，v-mode的用法已经实现。

接下来就是自定义的插槽类型组件要通过form表单的校验。网上查询了很多资料，得知

组件 slotTypeSelector在 value props 变化时，没有触发 el-form 表单的 validate 表单校验。

于是想办法去触发el-form 表单的 validate 表单校验。

代码如下：

 methods: {
    handleSlotTypeChanged(value) {
      // 添加change事件回调，为了emit这个'el.form.change'事件！
      this.$refs.slotTypeRef.$emit('el.form.change', value); // 重点！自定义组件使用element的form表单校验
    },

slotType: [
          {
            required: true,
            message: "请选择插槽类型",
            trigger: ["change"],
          },
        ],

至此就大功告成了！！！