.sync

对.sync的理解

单一对象

当需要对一个prop进行双向绑定，但不幸的是，真正的双向绑定会带来维护上的问题(控制台会提示不要直接修改prop)，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源

这时候我们会利用 $emit 来解决这一问题。通过在子组件监听属性的变化，然后发送事件给父组件，接着父组件绑定相应的事件。一旦子组件的属性发生变化，就触发父组件的事件。

具体实现是这样的：
针对dialogVisible，一旦子组件的dialogVisible发生改变，触发下面的事件handleClose

  handleClose() {
    this.dialogVisible = false
    this.$emit("dialogVisible")
  }

然后父组件在利用@dialogVisible="handleDialg"来触发事件handleDialog

  <elDialog :visible="visible" @dialogVisible="handleDialog"/>
  handleDialog() {
    this.visible = false
  }

• 而.asyc是他们的一个缩写，

父组件中：

<elDialog :visible.sync="visible"/>

子组件中的方法

handleClose() {
  this.dialogVisible = false
  <!-- update是必要的 -->
  this.$emit("update:dialogVisible")
}

• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=“doc.title + ‘!’” 是无效的)

针对多个对象

如果一个组件的多个prop都要实现双向绑定，只需要每个prop加sync修饰符

<elDialog :a.sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2"></elDialog >

但这太麻烦了，当我们用一个对象同时设置多个prop的时候，也可以将这个.sync修饰符和v-bind 配合使用：

<text-document v-bind.sync="doc"></text-document>

这样会把 doc对象 中的每一个property(如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

文章参考例子：index.vue和elDialog.vue