v-model
v-model
能够实现双向数据绑定(数据model
改变会自动响应到UI
层,UI
层的数据改变能够同步到model
层),一般用在表单的双向数据绑定。v-model
会忽略所有表单元素的value
、checked
、selected
特性的初始值而总是将Vue
实例的数据作为数据来源。
---在表单上---
<input v-model="searchText"/>
等价于:
<input :value="searchText" @input="search=$event.target.value">
---在组件上---
<Son :value="searchText" @input="fatherChange"/>
Vue.component('Son',{
props:['value'],
template:`
<input :value="value" @input="$emit('input',$event.target.value)">
`
//$event.target.value将作为父组件fatherChange()的第一个参数;
})
.sync修饰符
- .sync
主要用来实现父子组件间数据的双向传递。
vue
中是不推荐使用双向数据传递的,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源,会带来维护上的问题。- 本质还是个语法糖但是有局限性
- 适用于:触发事件返回的值 正是 属性要改的值,一般是单一属性。比如触发事件返回的值正好就是提title的新值
- 更多逻辑的话,就不适用了
- 更适用于:非表单类的组件
---在没有.sync时,使用如下方式实现子组件修改父组件的数据---
<Son :title="Father.title" @update:title="fatherChange"/>
Vue.component('Son',{
props:['title'],
template:`
<div @click="$emit('update:title',newTitle)">{{title}}</div>
`
// newTitle将作为父组件fatherChange()的第一个参数;
})
---.sync修饰符---
<Son :title.sync="Father.title"/> //无需再监听update:value事件,但子组件需派发对应的自定义事件
Vue.component('Son',{
props:['title'],
template:`
<div @click="$emit('update:title',newTitle)">{{title}}</div>
`
})
总结
- v-model默认情况下为value+input的组合,.sync为任意组合。
- v-model 常用在表单中;.sync 主要用在父子组件通信中,子组件需要修改父组件数据时。
- v-model不能修改外部传进来的props,如果要实现props的双向数据绑定,则需要使用.sync。
- 可以将 v-model 理解成.sync 的一种特殊情况,二者底层的实现机制类似;v-model 做了数据传递+修改的工作;.sync 更多的是数据传递,修改需要交给用户自己。