关于使用element-ui组件化el-cascader表单验证无法通过的解决

  在做项目的时候，多处要用到级联，所以就想着将他封装成单独的组件，然后问题就出现了，在form验证表单中无法通过验证（正常的是el-cascader需要一个v-model进行双向绑定，但是封装组件无法使用v-model），最开始的解决方案是，当级联触发change事件的时候，就将值添加到表单对象（addForm）中，但是这中方法不行(原因不详，有知道的大佬求解答)，然后睡觉前突然想出来一个方法，第二天来试了一下，果然有效。具体方法如下:

父组件中： 将addForm对象（el-form的:model绑定的那个对象）传入到子组件中，如果当前的值prop值（就是v-model绑定的值，因为在做表单验证的时候prop的值要和v-model的值一致）是动态的那么也要传入，如果静态的就不用了
子组件中： 正常的用v-model绑定在el-cascader上去，因为form对象是响应式的，所以当子组件中级联选中了值，那么addForm中就会有值，就可以通过表单验证了

下面是代码部分
子组件

<template>
  <div>
    <el-cascader
      :options="options"
      :props="props"
      @change="handleChange"
      clearable
      v-model="cForm[cProp]"
    ></el-cascader>
  </div>
</template>

<script>
import http from '@/api/http.js'
export default {
  name: 'cascader',
  props: {
    cProp: {
      type: String,
      default: () => ''
    },
    cForm: {
      type: Object,
      default: () => {}
    }
  }
</script>

父组件

<el-form
        ref="formRef"
        :rules="dialogRules"
        :model="addForm"
        label-width="120px"
      >
        <el-form-item
          v-for="(item, index) in formData"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :ref="item.prop"
        >
          <template v-if="item.type === 'cascader' && item.children">
          <!--自定义级联组件-->
            <Cascader
              :cProp="item.prop"
              :cForm="addForm"
              :data-prop="item.prop"
            />
          </template>
        </el-form-item>
      </el-form>

<script>
import Cascader from './Cascader'
export default {
  name: 'addDialog',
  components: {
    Cascader
  },
  data() {
    return {
      dialogVisible: true,
      addForm: {},
      dialogRules: {}
    }
  }
</script>

仅以此记录一下，为了方便自己查阅，希望仔细阅读看是否符合自己的场景，切勿盲目使用