Problemas causados por tipos de referencia de componentes personalizados

<template>
  <div class="form-container">
    <Form
      ref="classForm"
      :model="form"
      :rules="rules"
    >
      <div v-for="(items,index) in subjectListInner" :key="index">
        <FormItem
          label=""
        >
          <Select
            v-model="items.project"
            clearable
            style="width:200px; margin-right: 30px;"
            placeholder="请选择所属项目"
            @on-change="val => handleChange('project', val, index)"
          >
            <Option
              v-for="item in items.projectList"
              :key="item.value"
              :value="item.value"
            >{
    
    {
    
     item.label }}</Option>
          </Select>
          <Select
            v-model="items.firstSubject"
            :disabled="items.project === ''"
            clearable
            style="width:200px; margin-right: 30px;"
            placeholder="一级科目"
            @on-change="val => handleChange('first', val, index)"
          >
            <Option
              v-for="item in items.firstSubjectOptions"
              :key="item.id"
              :value="item.id"
            >{
    
    {
    
     item.name }}</Option>
          </Select>
          <Select
            v-if="items.secondSubjectOptions"
            v-model="items.secondSubject"
            :disabled="items.firstSubject === ''"
            clearable
            style="width:200px"
            placeholder="二级科目"
            @on-change="val => handleChange('second', val, index)"
          >
            <Option
              v-for="item in items.secondSubjectOptions"
              :key="item.id"
              :value="item.id"
            >{
    
    {
    
     item.name }}</Option>
          </Select>
          <span @click="handleDelete(index)">
            <Icon type="md-remove" size="24" />
          </span>
        </FormItem>

      </div>
      <span @click="add">
        <Icon type="md-add" size="24" />
      </span>
    </Form>

  </div>
</template>

<script>

export default {
    
    
  props: {
    
    
    subject: {
    
    
      type: Array,
      default: () => {
    
    
        return [];
      }
    },
    firstsubjectoptions: {
    
    
      type: Array,
      default: () => {
    
    
        return [];
      }
    },
    secondsubjectoptions: {
    
    
      type: Array,
      default: () => {
    
    
        return [];
      }
    }
  },
  data() {
    
    
    return {
    
    
      form: {
    
    
        project: '', // 所属项目
        firstSubject: '', // 一级科目
        firstSubjectDesc: '', // 一级科目描述
        secondSubject: '', // 二级科目
        secondSubjectDesc: '' // 二级科目描述
      },
      rules: {
    
    
        firstSubject: {
    
    
          required: true,
          message: '请选择科目'
        }
      },
      // 项目
      projectList: [{
    
    
        value: '公务员',
        label: '公务员'
      }, {
    
    
        value: '事业单位',
        label: '事业单位'
      }],
      subjectListInner: this.subject || []
    };
  },
  watch: {
    
    
    subject(newVal, oldval) {
    
    
    //   console.log('e1', JSON.stringify(newval) + JSON.stringify(oldval));
    // 引用类型 故深拷贝一份 做隔离
      this.subjectListInner = JSON.parse(JSON.stringify(newVal));
      for (let i = 0; i < this.subjectListInner.length; i++) {
    
    
        this.$set(this.subjectListInner[i], 'projectList', this.projectList);
        this.$set(this.subjectListInner[i], 'firstSubjectOptions', this.firstsubjectoptions);
        this.$set(this.subjectListInner[i], 'secondSubjectOptions', this.secondsubjectoptions);
        const firstItem = this.subjectListInner[i].firstSubjectOptions.find(item => item.id === this.subjectListInner[i].firstSubject);
        this.$set(this.subjectListInner[i], 'secondSubjectOptions', firstItem ? firstItem.twoSubject : null);
      }
    },
    firstsubjectoptions(newval, oldval) {
    
    
      for (let i = 0; i < this.subjectListInner.length; i++) {
    
    
        this.$set(this.subjectListInner[i], 'projectList', this.projectList);
        this.$set(this.subjectListInner[i], 'firstSubjectOptions', newval);
        this.$set(this.subjectListInner[i], 'secondSubjectOptions', this.secondsubjectoptions);
        const firstItem = this.subjectListInner[i].firstSubjectOptions.find(item => item.id === this.subjectListInner[i].firstSubject);
        this.$set(this.subjectListInner[i], 'secondSubjectOptions', firstItem ? firstItem.twoSubject : null);
      }
    }
  },
  created() {
    
    
  },
  mounted() {
    
    

  },
  methods: {
    
    
    emitChange() {
    
    
      const temp = [];
      for (let index = 0; index < this.subjectListInner.length; index++) {
    
    
        const element = this.subjectListInner[index];
        const subjectJson = {
    
     project: element.project || '', firstSubject: element.firstSubject || '', firstSubjectDesc: element.firstSubjectDesc || '', secondSubject: element.secondSubject || '', secondSubjectDesc: element.secondSubjectDesc || '' };
        temp.push(subjectJson);
      }
      this.$emit('subjectChange', temp);
    },
    add() {
    
    
      this.subjectListInner.push({
    
     project: '', projectList: this.projectList, firstSubject: null, firstSubjectDesc: '', firstSubjectOptions: this.firstsubjectoptions, secondSubject: null, secondSubjectDesc: '', secondSubjectOptions: [] });
      this.emitChange();
    },
    handleDelete(index) {
    
    
      this.subjectListInner.splice(index, 1);
      this.emitChange();
    },
    // 一级考点变化函数
    handleChange(type, val, index) {
    
    
      if (type === 'project') {
    
    
        this.subjectListInner[index].firstSubject = '';
        this.subjectListInner[index].firstSubjectDesc = '';
        this.subjectListInner[index].secondSubject = '';
        this.subjectListInner[index].secondSubjectDesc = '';
      } else if (type === 'first') {
    
    
        this.subjectListInner[index].secondSubject = '';
        this.subjectListInner[index].secondSubjectDesc = '';
        if (val) {
    
    
          const firstItem = this.subjectListInner[index].firstSubjectOptions.find(item => item.id === val);
          this.subjectListInner[index].firstSubjectDesc = firstItem.name;
          this.subjectListInner[index].secondSubjectOptions = firstItem.twoSubject;
        }
      } else if (type === 'second' && this.subjectListInner[index].secondSubjectOptions && val) {
    
    
        const secondItem = this.subjectListInner[index].secondSubjectOptions.find(item => item.id === val);
        this.subjectListInner[index].secondSubjectDesc = secondItem.name;
      }
      this.emitChange();
    }
  }
};
</script>

<style scoped>
</style>
    changeSubject(e) {
    
    
      console.log('e8', e);
      // this.form.subject = e;
      this.$set(this.form, 'subject', e);
      console.log('e9', this.form.subject);
    }
 <MutilItemSelect :subject="form.subject" :firstsubjectoptions="firstSubjectOptions" :secondsubjectoptions="secondSubjectOptions" @subjectChange="changeSubject" />