Fork me on GitHub

插件

字数统计: 1.6k字   |   阅读时长≈ 7分

一、Vue2 中 v-model 的使用

v-model 是语法糖，本质还是父子组件间的通信。父子组件通信时有两种方式：

  1. 父给子传值：通过 props
  2. 子给父传值：通过 Events up，使用 $emit 触发事件。

1.1、父组件给子组件传值

父组件代码

1
2
3
4
5
6
7
8
9
10
11
12
<child  :msg="msg"  />

<script>

 export default{
  data(){
   return{
    msg:"父组件给子组件传值"
   }
  }
 }
</script>

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
 <div>
  {{msg}} 
 </div>  
</template>

<script>
 export default{
  props:{
   msg:{
    type:String,
    default:""
   }
  } 
 }

</script>

props 是单向数据流，子组件只能读取，并不能修改 msg 。对象类型可以，但不建议修改。

1.2、父子组件双向绑定

子组件同步一个数据的时候，子组件既要使用，还要修改这个数据，以前需要通过 props Down 和 Events Up 来实现。现为了方便，提供了特殊的语法糖 v-model 。

父组件代码：

1
2
3
{{msg}}

<set-input v-model="msg" />

子组件 SetInput.vue 文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>

 <div>

  <input type="text" v-model="newValue">

 </div>

</template>

<script>


export default {

 props:{

  value:{

   type:String,

   default:''

  }

 },


 computed:{

  newValue:{

   get:function(){

    return this.value

   },

   set:function(value){

    this.$emit('input',value)

   }
  }

 }

}

</script>

v-model = “msg” 可以翻译为：

1
2
3
4
:value="msg"


@input="msg=$events"

所以父组件的代码可以翻译为：

1
<set-input :value="msg" @input="msg=$events" />

在一个组件上，v-model 只能使用一次，如果想要对多个数据同步绑定，则可以使用.sync修饰符。

二、.sync修饰符

.sync 和 v-model 都是语法糖，本质还是父子组件间的通信。使用 .sync 修饰符实现父子组件多个数据双向绑定。

因为 vue2 中组件只能定义一个 v-model，如果父子需要实现多个数据双向绑定，就需要借助 .sync 修饰符。

.sync 使用原理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<child-comp v-model="msg" :foo.sync="foo"  />


//可翻译为



<child-comp 

 :value="msg" @input="msg=$event"   

 :foo="foo" @update:foo="foo=$event"  />
/*********** 一个完整的代码示例 *************/

//父组件代码


<child-comp v-model="msg" :foo.sync="foo"  />
    

//子组件代码

<template>

 <div>
  <input type="text" v-model="newFoo">
  <input type="text" v-model="newValue">
 </div>

</template>

<script>

export default {

 props:{

  value:{

   type:String,

   default:''
  },
  foo:{

   type:String,

   default:""
  }
 },


 computed:{

  newValue:{

   get:function(){

    return this.value
   },

   set:function(value){

    this.$emit('input',value)

   }

  },


 newFoo:{

  get:function(){

   return this.foo

  },

  set:function(value){

   this.$emit('update:foo',value)

  }

 }

 }

}



</script>

三、Vue3.x 使用 v-model

vue2 中的 v-model 和 .sync 功能重叠，容易混淆，因此 vue3 做了统一，一个组件可以多次使用 v-model 。

3.1、vue 3 的v-model使用原理：

1
2
3
4
5
6
7
8
<child-comp v-model="msg" /> 


//可翻译为



<child-comp :modelValue="msg" @update:modelValue="msg=$event" />

单个数据双向绑定完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//父组件代码



<child-comp v-model="name" />




子组件代码：



<template>


 <input type="text" v-model="newValue">

</template>


<script>

export default {

 props:{

  modelValue:{

   type:String,

   default:''

  }

 },

 computed:{

  newValue:{

   get:function(){

    return this.modelValue

   },
   set:function(value){

    this.$emit('update:modelValue',value)
   }

  }

 }

}

</script>

vue3 使用特定的 modelValue ，避免 value 的占用，通过 update:modelValue 实现数据双向绑定。值得注意的是，vue3 移除了 model 选项。

3.2、多个 v-model 使用

在 vue3 一个组件可以使用多个 v-model ，统一了 vue2 的 v-model 和 .sync 修饰符。

使用原理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<child-comp v-model:name="name" v-model:age="age" /> 


  //可翻译为



<child-comp 



  :name="name" @update:name="name=$event"



  :age="age" @update:age="age=$event" />

实现多个数据双向绑定完整实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
//父组件代码

<child-comp v-model:name="name" v-model:age="age" /> 

 //子组件代码


<template>

 <div>
  <input type="text" v-model="newName">

  <input type="text" v-model="newAge">

 </div>

</template>

<script>

export default {

 props:{

  name:{

   type:String,

   default:''

  },

  age:{
   type:String,

   default:""

  }

 },


 emits:['update:name','update:age'],

 computed:{

  newName:{

   get:function(){

    return this.name

   },

  set:function(value){

    this.$emit('update:name',value)

   }

 },

 newAge:{

  get:function(){

   return this.age

  },

  set:function(value){

   this.$emit('update:age',value)

  }
  }

 }

}



</script>

需要注意的是 script 中多了一个 emits 选项，你发现了吗？

vue3 组件的自定义事件需要定义在 emits 选项中，只要是自定义事件，就需要添加在 emits 中，否则会有警告。它的优点：

  1. 如果与原生事件相同名时，事件就会被触发两次，如果在 emits 选项中加入时，当作自定义事件处理，只会触发一次。
  2. 更好地指示组件的工作方式。
  3. 可以校验对象形式的事件。

四、总结

从 vue2.0 开始，组件上自定义 v-model 进行数据双向绑定，不断改进它的使用。过程如下：

1
<child-comp v-model="msg" />

4.1、vue2.0 可以翻译为：

1
<child-comp :value="msg" @input="msg=$event" />

存在问题：v-model 和 value 有一个强绑定关系，如果子组件中有一个 input 原生标签，此时就会影响原生标签的 value 和 input 事件。

4.2、vue2.2版本

引入了 model 组件选项，允许开发者任意指定 v-model 的 props 和 event 。这样就解决了 vue2.0 中的 v-model 和 value 的强绑定关系。但是还是存在一个问题，就是多个数据双向绑定时，还是需要借助 .sync 修饰符。

4.3、vue3.x 版本

Vue3 可以翻译为：

1
<child-comp :modelValue="msg" @update:modelValue="msg=$event" />

vue3 统一 使用 v-model 进行多个数据双向绑定，废除了 model 组件选项。

外部链接

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。