octavia明锐
vue3中v-model语法糖
v-model语法糖
写在前⾯
⽬标：现在vue3的使⽤越来越普遍了，vue3这⽅⾯的学习我们要赶上，今天说⼀下vue3中v-model语法糖的使⽤，想了解vue2中的v-model可以去看我之前的⽂章。
1. Vue2中v-model的应⽤场景
<template>
<div>
<div>v-model指令⽤法</div>
<hr>
<div>{{uname}}</div>
⽤户名：<input type="text"v-model='uname'>
<!-- 此时 $event表⽰传递的原⽣事件对象-->
<input type="text":value='uname'@input='uname=$event.target.value'>
<!-- ---------------------------------------------------------------- -->
<!-- v-model也可以使⽤到组件上 -->
<my-com v-model='info'></my-com>
<!-- 此时 $event表⽰⼦组件传递的具体数据 this.$emit('input', 100) -->
<my-com :value='info'@input='info=$event'></my-com>
<!-- Vue2中$event有两层含义 -->
<!-- 1. 如果是原始DOM的事件，那么$event表⽰js的原⽣事件对象 -->
<!-- 2、如果是组件的⾃定义事件，那么$event是$emit传递的数据 -->
艾力绅2021款图片价格
</div>
</template>
<script>
import{ ref }from'vue'
export default{
name:'App',
setup(){
const uname =ref('tom')
return{ uname }
}
}
</script>
总结：Vue2中v-model的应⽤场景
1. ⽤到表单元素上：$event表⽰事件对象
2. ⽤到组件上：$event表⽰⼦组件传递的数据
2. Vue3中v-model新的特性
v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定
⽗组件
<div>{{info}}</div>
+ <!-- <TestEvent v-model='info' /> -->
+ <TestEvent :modelValue='info'modelValue='info=$event'/>
</div>
</template>
<script>
import TestEvent from'./TextEvent.vue'
斑马骑士import{ ref }from'vue'
export default{
name:'App',
components:{ TestEvent },
setup(){
const info =ref('hello')
return{ info }
}
}
</script>
⼦组件
<template>
<div>
⼦组件 {{modelValue}}
</div>
<button @click='handleEdit'>点击</button>
</template>
<script>
export default{
name:'TestEvent',
props:{
+// Vue3中，v-model默认绑定的属性名称是modelValue
+ modelValue:{
+ type: String,
+default:''
}
},
setup(props, context){
const handleEdit=()=>{
// delValue = 'nihao'
/
/ 通知⽗组件修改数据
// .sync修饰符：update：绑定的属性名称
+ it('update:modelValue','nihao')
}
return{ handleEdit }
}
}
</script>
v-model可以使⽤多次，可以写成以下的样式
v-model=‘info’， v-model:msg=‘msg’，v-model:⾃定义=‘⾃定义’v-model的是 :modelValue 和 @update:modelValue 两者的绑定
v-model:msg是:msg 和 @update:msg两者的绑定
⽗组件
<div>{{info}}</div>
<div>{{msg}}</div>
<!-- v-model提供了⼀种双向绑定机制（在组件上-⽗⼦之间的数据交互） -->
<!-- .sync修饰符已经被废弃，替代⽅案是v-model -->
<!-- <TestEvent v-model='info' :msg.sync='msg' /> -->
+ <TestEvent modelValue='info'msg='msg'/>
+ <!-- <TestEvent :modelValue='info' @update:modelValue='info=$event' /> -->
</div>
</template>
<script>
import TestEvent from'./TextEvent.vue'
import{ ref }from'vue'
lancer evolutionexport default{沃尔沃电动汽车
name:'App',
components:{ TestEvent },
setup(){
const info =ref('hello')
const msg =ref('hi')
return{ info, msg }
}
}
</script>
⼦组件
<template>
<div>
⼦组件 {{modelValue}}
</div>
<button @click='handleEdit'>点击</button>
</template>
<script>
export default{
name:'TestEvent',
props:{
// Vue3中，v-model默认绑定的属性名称是modelValue
modelValue:{
type: String,
default:''
},
msg:{
type: String,
default:''
}
},
setup(props, context){宝马5系523
const handleEdit=()=>{
// delValue = 'nihao'
// 通知⽗组件修改数据
// .sync修饰符：update：绑定的属性名称
+ it('update:modelValue','nihao')
+ it('update:msg','coniqiwa')
}
return{ handleEdit }
}
}
</script>
总结：
1. v-model可以通过绑定多个属性的⽅式，向⼦组件传递多个值并且保证双向绑定
2. 可以替代Vue2中sync修饰符（sync修饰符在Vue3中已经被废弃）
发布评论