vue2、vue3的v-model在原生组件上表现相同,组件上表现不同
都说v-model是一种语法糖,因为它本质上是相当于v-bind和v-on的简写组合
<input v-model="searchText" />
等价于
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
不同原生组件
https://v2.cn.vuejs.org/v2/guide/forms.html
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
input 和 textarea 元素使用 value property 和 input 事件;
checkbox 和 radio 使用 checked property 和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
vue2组件中使用v-model
默认情况下也使用 value property 和 input 事件;
<input v-model="searchText" />
等价于
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
2.2.0+ 新增可以自定义组件的 v-model
<text-document v-model="title"></text-document>
在text-document组件中可以指定model的传参与更新传参事件,比如:
export default {
model: {
prop: 'title',
event: 'update:title',
},
相当于
<text-document :title="title" @update:title="newValue => title= newValue"></text-document>
vue2 .sync修饰符
具名
<text-document :title.sync="title"></text-document>
相当于
<text-document :title="title" @update:title="newValue => title= newValue"></text-document>
所以text-document组件中this.$emit('update:title', newTitle)
来修改.sync修饰符绑定的title变量
不具名
当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:
这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。
<text-document v-bind.sync="doc"></text-document>
doc:{
title:"",
content:""
}
则相当于
<text-document :title="title" @update:title="newValue => title= newValue" :content="content" @update:content="newValue => content= newValue"></text-document>
vue3移除了.sync修饰符,因为直接使用了v-model来代替.sync
不具名
<text-document v-model="title"></text-document>
相当于
<text-document :modelValue="title" @update:modelValue="newValue => title= newValue"></text-document>
具名
<text-document v-model:title="title"></text-document>
相当于
<text-document :title="title" @update:title="newValue => title= newValue"></text-document>