使用vue的v-model自定義 checkbox元件

c3tc3tc3t發表於2018-02-09
Vue元件
 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 })

 

相關文章