使用vue的v-model自定义 checkbox组件

<template id='c'>
<input type="checkbox"  :checked="checked"  v-on:change="onChange"/>
</template>

Vue.component('my-checkbox', {
template:'#c',
model: {
prop: 'checked',
event: 'change'  //要触发的事件
},
props: {
checked:Boolean, //接收外部传来的值
value: String
},
methods:{
onChange () {
console.log(event.target)
console.log(this.value)
this.$emit('change',event.target.checked)

}
}
})

<template id="greetings">
<div>

<my-checkbox v-model="f" value="some value" ></my-checkbox>
<h1>{{f}}</h1>
</div>
</template>

Vue.component('greetings-component',    {
template:    '#greetings',
data:    function    ()    {
return    {
user:    'heroaa',
foo:'hello',
f:true,
world:'world'
}
},
methods:{
get (v) {
console.log(v)
}
}
});

<div    id="app">
<greetings-component></greetings-component>
</div>

new Vue({
el: '#app',
data:{
user:'hero'
}
})