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>