通常 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 });
原文地址：https://www.cnblogs.com/or2-/p/10496532.html
时间： 2024-08-29 10:34:04