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