通常 vue在html常見表單空間支援v-model雙向繫結例如
1 <input v-model="message" placeholder="edit me"> 2 <p>Message is: {{ message }}</p>
1,當我們自定義元件時如何使用v-model?
答:程式碼例項如下
2 我們在自定義元件中使用v-model的目的是什麼?
答:自定義模板上定義v-mode目的是向外傳遞值,也就是向他的父元件傳遞值,影響父元件的屬性,通過父元件的屬性初始化自定義的子元件,然後在子元件上操作來與父元件達到互動目的
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script> 9 <title>Document</title> 10 </head> 11 12 <body> 13 <template id="greetings"> 14 <div> 15 <h1>父元件中的hk:{{ hk }}</h1> 16 <hr /> 17 <!--這裡我們將父元件中的hk的值傳遞給子元件zz的modelVal屬性,112傳遞給子元件的kk--> 18 <zz v-model="hk" kk="112"></zz> 19 </div> 20 </template> 21 22 <template id="fff"> 23 <label> 24 <!--這裡的:checked是input自帶屬性，不是我們定義的，它的值是checkval方法計算的值--> 25 <!--:kk="kk"是上面我們使用zz元件時,我們寫的 kk=112，可以理解將112傳遞給kk,kk傳遞給:kk,因為我們在zz元件裡定義了kk屬性--> 26 <!--@change=update使我們定義一個監聽函式,當點選這個radio時發生變化觸發這個update方法--> 27 <input type="radio" :checked="checkVal" :kk="kk" @change="update" /> 28 <!--這裡我們列印我們自定義v-model屬性值--> 29 這裡列印父元件中呼叫子元件時傳遞hk的值給modelVal:{{ modelVal }} 30 <hr /> 31 <!--這裡我們用來檢視checkVal值--> 32 checkVal:{{ checkVal }} 33 </label> 34 </template> 35 36 <div id="app"> 37 <greetings-component></greetings-component> 38 </div> 39 </body> 40 <script> 41 Vue.component('zz', { 42 template: '#fff', 43 model: { 44 prop: 'modelVal', //這裡使我們定義的v-model屬性,叫做modelVal,這裡我們命名為modelVal 45 event: 'change' 46 }, 47 props: { 48 modelVal: { 49 //這裡我們要定義這個modelVal,才能在model中的prop中使用 50 type: String 51 }, 52 kk: { 53 type: String 54 } 55 }, 56 computed: { 57 checkVal() { 58 console.log('---in checkval'); 59 console.log('this.modelVal:', this.modelVal); //這裡列印this.modeVal值 60 console.log('kk:', this.kk); //列印傳遞給kk的值 61 console.log('---in checkval'); 62 //這裡返回的是false,表示沒有被點選,然後我們再次點選 63 return false; 64 } 65 }, 66 methods: { 67 update($event) { 68 console.log('---in update'); 69 console.log('this.modelVal:', this.modelVal); //這裡列印this.modeVal值 70 console.log('---in update'); 71 var a = $event.target.checked; 72 this.$emit('change', $event.target.checked); //這裡是返回給父元件,當我們點選radio時,選中了,返回true,影響了父元件中的hk的值 73 } 74 } 75 }); 76 77 Vue.component('greetings-component', { 78 template: '#greetings', 79 data: function () { 80 return { 81 hk: 'greetings-component-hk' 82 }; 83 } 84 }); 85 86 /* eslint-disable no-new */ 87 new Vue({ 88 el: '#app' 89 }); 90 </script> 91 92 </html>
3,按照我的思路我們修改官方的例子
官方程式碼如下
1 <div id="app"> 2 <greetings-component></greetings-component> 3 </div>
1 <template id="greetings"> 2 <div> 3 <custom-input v-model="searchText"></custom-input> 4 {{ searchText }} 5 </div> 6 </template>
7 8 <script> 9 Vue.component('custom-input', { 10 props: ['value'], 11 template: ` 12 <input 13 v-bind:value="value" 14 v-on:input="$emit('input', $event.target.value)" 15 > 16 ` 17 }) 18 19 Vue.component('greetings-component', { 20 template: '#greetings', 21 data: function() { 22 return { 23 24 searchText: 'searchText' 25 }; 26 } 27 }); 28 29 /* eslint-disable no-new */ 30 new Vue({ 31 el: '#app' 32 }); 33 </script>
然後按照我講的思路,不用預設的value這個名稱
1 <div id="app"> 2 <greetings-component></greetings-component> 3 </div> 4 5 <template id="greetings"> 6 <div> 7 <custom-input v-model="searchText"></custom-input> 8 {{ searchText }} 9 </div> 10 </template> 11 12 Vue.component('custom-input', { 13 model: { 14 prop: 'modelVal', 15 event: 'input' //這裡我們監聽input事件 16 }, 17 props: { 18 modelVal: { 19 type: String 20 } 21 },
methods: {
hello: function() {
console.log(this.modelVal);
}
},
22 template: ` 23 24 <input @input="hello
25 v-bind:value="modelVal"
26 v-on:input="$emit('input', $event.target.value)"
27 > 28 ` 29 }); 30 31 Vue.component('greetings-component', { 32 template: '#greetings', 33 data: function() { 34 return { 35 36 searchText: 'searchText' 37 }; 38 } 39 }); 40 41 /* eslint-disable no-new */ 42 new Vue({ 43 el: '#app' 44 });