v-model
从 Vue 0.x 开始,Vue 就用 v-model 来实现「双向绑定」。
如
data: {
user: { name: 'frank'}
}
<input v-model="user.name">
能实现以下两个绑定:
user.name 的变化自动同步到 input.value
input.value 的变化自动同步到 user.name
但是当 FLUX 单向数据流兴起之后,Vue 的作者重新审视了「双向绑定」,发现「双向绑定」的一些问题之后,就更倾向于「单向绑定」了。v-model 被拆成两部分
data: {
user: { name: 'frank'}
},
<input :value="user.name" @input="user.name = $event">
这样一来,数据的变更权就回到数据拥有者手上了。
为了巩固单向数据流这一模式,Vue 规定子组件不能修改父组件传给它的 props,一旦发现就会打印出一个警告。
单向数据流的优点:
1,数据拥有者清楚地知道数据变化的原因和时机(因为是它自己操作数据的)
2,数据拥有者可以阻止数据变化
.sync 修饰符
例子:
<div :selected.sync="x"> 等价于 <div :selected="x" @update:selected="x = $event">
Vue.component('child',{
props: ['selected'],
template: `
<div>
selected: {{selected}}
<hr>
<button @click="$emit('update:selected',1)">1</button>
<button @click="$emit('update:selected',2)">2</button>
</div>
`
})
var vm = new Vue({
el: '#app',
data:{
value:2
},
template:`
<div>
爸爸
<div style="border: 1px solid red;">
<child :selected="value" @update:selected="selected=$event"></child>
</div>
</div>
`
})
.sync 的作用和 v-model 一模一样,就是用双向绑定的语法糖,实现两个单向绑定。