vue在自定義CheckBox組件上使用v-model實現雙向綁定

前言：看了vue自定義組件的 v-model這一小節後。感覺有點不是很好(既然使用的是複選框、那麼大多數應該綁定的是個數組，而示例中是個Boolean類型的)。自己寫了一個綁定數組的組件。但總感覺不太優雅。希望大家看到後多補充意見。

代碼如下：

<template>
    <span>
        <label v-for="(item,index) of hobbys">
            <input @change="valueChange($event)" type="checkbox" :key="index" :value="item" name="hobby[]">{{item}}
        </label>
    </span>
</template>

<script>
	export default {
		name: "sg-check-box",
        model:{
			event:'change',
            prop:'checked'
        },
        props:{
			checked:Boolean
        },
        data(){
			return{
				hobbys:[
					'游泳','爬山','打球'
                ],
                values:[],//將values拋出到父組件
            }
        },
        methods:{
	        valueChange(event){
                let {checked,value} = event.target;
                if(checked&&!this.values.includes(value)){//如果當前選中並且values中沒有對應的值。將此值添加到values中
	        		this.values.push(value)
                }else if (!checked&&this.values.includes(value)){//如果當前取消選中並且values中存在對應的值。將此值從values中移除
                	let index = this.values.findIndex(hobby=>hobby===value)
                    this.values.splice(index,1)
                }
	        	this.$emit('change',this.values)
            }
        }
	}
</script>