【前端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>