使用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'
   }
 })