【Vue】我对Vue双向绑定的理解

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AC_greener/article/details/88230438

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 一模一样，就是用双向绑定的语法糖，实现两个单向绑定。