【前端element-ui】对于封装el-select和checkbox-group的多选控件导致数据双向绑定失败问题的处理

一、关于通过父组件props传参el-select【下拉多选模式】双向绑定失败问题处理方式

1、this.$emit("change", val); 采用change二不是input

2、对_value赋值不能直接使用"="号，而是push

<template>
  <div>
      <el-select v-model="_value" multiple clearable placeholder="请选择选项" @change="handleValue">
        <el-option v-for="(v, index) in options" :key="index" :value="v" :label="v"></el-option>
      </el-select>
  </div>
</template>
<script>

export default {
  name: "multiple",
  props:{
    value:{
      type: Array,
      default: () => {
        return []
      }
    },
    options:{
      type: Array,
      default: () => {
        return []
      }
    },
  },
  computed:{
    _value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      }
    }
  },
  methods: {
    handleValue(data){
      this._value.splice(0, this._value.length);
      data.forEach(el=>{
        this._value.push(el)
      })
    }
  }
}
</script>

二、关于通过父组件props传参checkbox-group【多选框】双向绑定失败问题处理方式

1、内部事件采用@input而不是@change="handleValue"

2、对_value赋值不能直接使用"="号，而是push

<template>
  <div>
      <el-checkbox-group v-model="_value" @input="handleValue">
        <el-checkbox v-for="(v, index) in options" :key="index" :label="v" >{{v}}</el-checkbox>
      </el-checkbox-group>
  </div>
</template>
<script>

export default {
  name: "checkbox",
  props:{
    value:{
      type: Array,
      default: () => {
        return []
      }
    },
    options:{
      type: Array,
      default: () => {
        return []
      }
    },
  },
  computed:{
    _value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      }
    }
  },
  methods: {
    handleValue(data){
      this._value.splice(0, this._value.length);
      data.forEach(el=>{
        this._value.push(el)
      })
    }
  }
}
</script>