vue的官網介紹非常不錯，先通讀一遍。

目前成都創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網站建設、域名、虛擬主機、網站改版維護、企業(yè)網站設計、福鼎網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

2.3.0+ 新增

在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源。

這也是為什么我們推薦以 update:my-prop-name 的模式觸發(fā)事件取而代之。舉個例子，在一個包含  title prop 的假設的組件中，我們可以用以下方法表達對其賦新值的意圖：

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

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

為了方便起見，我們?yōu)檫@種模式提供一個縮寫，即 .sync 修飾符：

當我們用一個對象同時設置多個 prop 的時候，也可以將這個 .sync 修飾符和  v-bind 配合使用：

這樣會把 doc 對象中的每一個屬性 (如  title ) 都作為一個獨立的 prop 傳進去，然后各自添加用于更新的  v-on 監(jiān)聽器。

以下為代碼實例

father.vue

child.vue

那這個修飾符的原理是什么呢？其實還是vue父組件可以監(jiān)聽子組件的事件，自組件可以觸發(fā)父組件的事件

father.vue

child.vue

在沒有sync的時候，我們要實現(xiàn)雙向綁定，可能需要在父組件里綁定一個事件和一個值

father.vue

child.vue

但是有了sync之后，我們就可以這么寫

father.vue

child.vue

父組件中的子組件，少寫了一個自定義事件屬性，子組件中$emit直接出發(fā)父組件中數(shù)據(jù)的更新，清新明了。使用中需要注意的是，update和后面對應的數(shù)據(jù)名不能寫錯。

父子組件的雙向數(shù)據(jù)綁定

父組件改變數(shù)據(jù)可以改變子組件, 但是子組件的內容改變并不會影響到父組件

可以通過2.3.0新增的sync修飾符來達到雙向綁定的效果

father.vue

box.vue

利用了父級可以在子元素上監(jiān)聽子元素的事件

father.vue

box.vue

總結

以上所述是小編給大家介紹的vue .sync修飾符的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！