使用vue的v-model自定义 checkbox组件
1 <template id='c'> 2 <input type="checkbox" :checked="checked" v-on:change="onChange"/> 3 </template> 4 5 Vue.component('my-checkbox', { 6 template:'#c', 7 model: { 8 prop: 'checked', 9 event: 'change' //要触发的事件 10 }, 11 props: { 12 checked:Boolean, //接收外部传来的值 13 value: String 14 }, 15 methods:{ 16 onChange () { 17 console.log(event.target) 18 console.log(this.value) 19 this.$emit('change',event.target.checked) 20 21 } 22 } 23 }) 24 25 26 <template id="greetings"> 27 <div> 28 29 <my-checkbox v-model="f" value="some value" ></my-checkbox> 30 <h1>{{f}}</h1> 31 </div> 32 </template> 33 34 Vue.component('greetings-component', { 35 template: '#greetings', 36 data: function () { 37 return { 38 user: 'heroaa', 39 foo:'hello', 40 f:true, 41 world:'world' 42 } 43 }, 44 methods:{ 45 get (v) { 46 console.log(v) 47 } 48 } 49 }); 50 51 52 <div id="app"> 53 <greetings-component></greetings-component> 54 </div> 55 56 new Vue({ 57 el: '#app', 58 data:{ 59 user:'hero' 60 } 61 })