vue中.sync 修飾符

　　一直以來，都不太明白.sync的用法，歸根結底緣由在於，沒有仔細閱讀「.sync修飾符」。

　　正好，最近在拿一個項目練手，而後使用了elment-ui，而後在用到dialog的時候，屬性visible是用來控制是否顯示Dialog的，後面特地強調了支持.sync修飾符。

 

　　因此，此時再次看到.sync修飾符，就會想到這個Dialog，那麼必然不能放過了，正好好好研究一下.sync修飾符的用法。

　　vue官網關於.sync：

在有些狀況下，咱們可能須要對一個 prop 進行「雙向綁定」。不幸的是，真正的雙向綁定會帶來維護上的問題，由於子組件能夠修改父組件，且在父組件和子組件都沒有明顯的改動來源。

　　這說明在某些狀況下數據傳遞須要「雙向綁定」，但又不能爲了這些少數狀況，而致使多數狀況的數據維護困難，因此就「推薦以 update:myPropName 的模式觸發事件取而代之」，此時父組件就會稍顯麻煩，須要先綁定數據v-bind，而後監聽v-on:update:myPropName，爲了父組件使用上的方便，vue因而爲這種模式提供了.sync修飾符，也就是說父組件直接使用:myPropName.sync傳遞數據，子組件使用this.$emit("update:myPropName",myPropValue)，就實現了部分狀況下的父子組件的數據雙向綁定。

　　經過具體代碼實現一遍比較具象：

　　父組件： 

<modal-stop title="附加設備停用" :dialogVisible.sync="visible" @confirm="stopDevicesConfirm"/>

　　子組件是一個Dialog，那麼點擊「取消」按鈕時，其實也就是一個操做——關閉彈窗，那麼此時若是可以不須要在每個父組件當中定義：this.visible=false，確定會很happy，這就須要.sync修飾符來幫忙了。

　　父組件已經定義  :dialogVisible.sync="visible"，

　　那麼子組件當中： this.$emit("update:dialogVisible", false);   這裏的dialogVisible就是咱們自定義的屬性名稱，也就是myPropName，emit傳遞回去的false也就是須要在點擊「取消」按鈕以後，須要將visible修改爲的值。

　　是否是可以理解.sync修飾符了呢！