Vue .sync 父子組件"雙向綁定"

寫在前面，我用的vue版本是2.6，是大於2.3的。

今天在使用Vue進行父子組件傳值的時候，需要父組件向子組件傳值，同時子組件需要關閉父組件的彈窗，這就需要父子組件的雙向綁定。這里我用到了.sync修飾符(在Vue2.3之后的.sync只是編譯時的語法糖)

Vue官網解釋.sync修飾符

先上代碼

//父組件
<el-dialog title="修改科室信息" :visible.sync="dialogFormVisible">
      <dep-edit :department="department" :visible.sync="dialogFormVisible" @select="select"></dep-edit>
    </el-dialog>
data() {
    return {
      dialogFormVisible:false,
      department:{},
    };
  },
methods: {
    select() {
	//略
	}
}
//子組件
<div slot="footer" class="dialog-footer">
   <el-button @click="close">取 消</el-button>
   <el-button type="primary" @click="update">修改</el-button>
</div>
props: {
    department: {
      type: Object,
      default: {}
    },
},
methods: {
    close(){
      this.$emit('update:visible', false)
    },
    update(){
      this.$emit('select')
      this.$emit('update:visible', false)
    },
    
  }

再上效果

這里我用到了單向數據傳遞(department)、事件傳遞(select、visible)

1、數據傳遞

當你要從父組件向子組件傳遞數據時，在父組件中用 :department="department" 將數據傳遞到子組件，在子組件中用props接收該屬性，即可在子組件中使用該屬性數據。

2、數據傳遞 事件綁定=“雙向綁定” .sync

在上面的代碼中，我需要在子組件中改變父組件的dialogFormVisible屬性的值，用於控制彈窗的關閉。

這里在父組件中使用 .sync

:visible.sync="dialogFormVisible"

上面說到，.sync只是編譯時的語法糖，即編譯時該寫法會被擴展為

v-bind:visible="dialogFormVisible" v-on:update:visible="val=>dialogFormVisible=val"

前一個式子將數據傳遞給子組件，后一個式子綁定事件到組件。

這里我在子組件中沒用到visible，所以就沒用props接收。所以實際上我只用到了后面的事件。

然后在子組件中使用emit觸發當前實例上的事件，附加參數都會傳給監聽器回調。

this.$emit('update:visible', false)

可以看到，我們觸發的是update:visible，也就是擴展之后的事件，會將dialogFormVisible的值改變為false。

3、事件綁定

可以看到我在父組件使用子組件時寫了個@select="select"（即v-on:select="select"），然后在子組件中使用this.$emit('select')即可觸發該事件，與使用.sync是一樣的，只不過我這里沒有帶參數(感興趣的朋友可以試試帶參數的寫法)。

到此，正文結束。

---

寫在后面，為了加深印象，我又試了el-dialog的visible.sync，這個是element的el-dialog組件提供的Attributes

雖然我把我的子組件的屬性名也定義為visible，但是他們兩者之間是沒有直接關系的，如果把el-dialog的.sync修飾符去掉，會發現點擊對話框右上角的X是關不掉對話框的，就是因為dialog組件無法操作父組件的visible綁定的元素。

---

以上都是本人自己的理解，可能會與真正的解答不一致，歡迎各位大佬指正。