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 })
