vue框架之自定义组件中使用v-model
Posted or2-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue框架之自定义组件中使用v-model相关的知识，希望对你有一定的参考价值。
通常 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/[email protected]/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 <[email protected]=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 });