在有些情況下，我們可能需要對一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來維護(hù)上的問題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒有明顯的改動(dòng)來源。
這也是為什么我們推薦以 update:myPropName 的模式觸發(fā)事件取而代之。舉個(gè)例子，在一個(gè)包含 title prop 的假設(shè)的組件中，我們可以用以下方法表達(dá)對其賦新值的意圖：

    this.$emit('update:title', newTitle)

然后父組件可以監(jiān)聽那個(gè)事件并根據(jù)需要更新一個(gè)本地的數(shù)據(jù)屬性。例如：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
>
</text-document>

為了方便起見，我們?yōu)檫@種模式提供一個(gè)縮寫，即 .sync 修飾符：
<text-document v-bind:title.sync="doc.title"></text-document>

使用場景：封裝el-dialog時(shí)雙向綁定visible

• 子組件

<template>
       <el-dialog class="dialog-group" :visible.sync="showDialog">
</template>
<script>
 export default {
      name: "dialog-group",
      props: {
       visible: {
          type: Boolean,
          default: false
       }
      },
      data: function(){
        return {
              showDialog: this.visible
        }
      },
     watch: {
        showDialog: function() {
            this.$emit("update:visible", this.showDialog);
        },
        visible: function() {
          this.showDialog = this.visible;
        }
     }
}
</script>

• 父組件

 <dialog-group
      :visible.sync="showGroupDialog"
      :title="groupDialogTitle"
      :group-name="groupDialogName"
 >
</dialog-group>

element的dialog本身提供了.sync進(jìn)行數(shù)據(jù)雙向綁定，子組件的showDialog在dialog關(guān)閉時(shí)變?yōu)閒alse，需要emit事件來更新父組件的值。
showDialog賦值為 props 中的visible，visible下次更新時(shí)data不會(huì)自動(dòng)更新，所以需要watch它來更新showDialog控制dialog的顯示