vue2 与 vue3 — v-model 的使用
本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。
一、Vue2 中 v-model 的使用
v-model 是语法糖,本质还是父子组件间的通信。父子组件通信时有两种方式:
- 父给子传值:通过 props
- 子给父传值:通过 Events up,使用 $emit 触发事件。
1.1、父组件给子组件传值
父组件代码
<child :msg="msg" /> <script> export default{ data(){ return{ msg:"父组件给子组件传值" } } } </script>
子组件代码
<template> <div> {{msg}} </div> </template> <script> export default{ props:{ msg:{ type:String, default:"" } } } </script>
props 是单向数据流,子组件只能读取,并不能修改 msg 。对象类型可以,但不建议修改。
1.2、父子组件双向绑定
子组件同步一个数据的时候,子组件既要使用,还要修改这个数据,以前需要通过 props Down 和 Events Up 来实现。现为了方便,提供了特殊的语法糖 v-model 。
父组件代码:
{{msg}} <set-input v-model="msg" />
子组件 SetInput.vue 文件代码
<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" 可以翻译为:
:value="msg" @input="msg=$events"
所以父组件的代码可以翻译为:
<set-input :value="msg" @input="msg=$events" />
在一个组件上,v-model 只能使用一次,如果想要对多个数据同步绑定,则可以使用.sync修饰符。
二、.sync修饰符
.sync 和 v-model 都是语法糖,本质还是父子组件间的通信。使用 .sync 修饰符实现父子组件多个数据双向绑定。
因为 vue2 中组件只能定义一个 v-model,如果父子需要实现多个数据双向绑定,就需要借助 .sync 修饰符。
.sync 使用原理:
<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使用原理:
<child-comp v-model="msg" /> //可翻译为 <child-comp :modelValue="msg" @update:modelValue="msg=$event" />
单个数据双向绑定完整示例
//父组件代码 <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 修饰符。
使用原理:
<child-comp v-model:name="name" v-model:age="age" /> //可翻译为 <child-comp :name="name" @update:name="name=$event" :age="age" @update:age="age=$event" />
实现多个数据双向绑定完整实例:
//父组件代码 <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 中,否则会有警告。它的优点:
- 如果与原生事件相同名时,事件就会被触发两次,如果在 emits 选项中加入时,当作自定义事件处理,只会触发一次。
- 更好地指示组件的工作方式。
- 可以校验对象形式的事件