在說(shuō)vue 修飾符sync前，我們先看下官方文檔：vue .sync 修飾符，里面說(shuō)vue .sync 修飾符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 發(fā)布之后的實(shí)際應(yīng)用中，我們發(fā)現(xiàn) .sync 還是有其適用之處，比如在開(kāi)發(fā)可復(fù)用的組件庫(kù)時(shí)。我們需要做的只是讓子組件改變父組件狀態(tài)的代碼更容易被區(qū)分。從 2.3.0 起我們重新引入了 .sync 修飾符，但是這次它只是作為一個(gè)編譯時(shí)的語(yǔ)法糖存在。它會(huì)被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 監(jiān)聽(tīng)器。
示例代碼如下：

<comp :foo.sync="bar"></comp>

會(huì)被擴(kuò)展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當(dāng)子組件需要更新 foo 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：

this.$emit('update:foo', newValue)

猛一看不明白，下邊我么通過(guò)一個(gè)實(shí)例（彈窗的關(guān)閉事件）來(lái)說(shuō)明這個(gè)代碼到底是怎么運(yùn)用的。

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
      template: `<div v-if="show">
                    <p>默認(rèn)初始值是{{show}}，所以是顯示的</p>
                    <button @click.stop="closeDiv">關(guān)閉</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //觸發(fā) input 事件，并傳入新值
        }
      }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

動(dòng)態(tài)效果如下：

GIF.gif

vue 修飾符sync的功能是：當(dāng)一個(gè)子組件改變了一個(gè) prop 的值時(shí)，這個(gè)變化也會(huì)同步到父組件中所綁定。如果我們不用.sync，我們想做上面的那個(gè)彈窗功能，我們也可以props傳初始值，然后事件監(jiān)聽(tīng)，實(shí)現(xiàn)起來(lái)也不算復(fù)雜。這里用sync實(shí)現(xiàn)，只是給大家提供一個(gè)思路，讓其明白他的實(shí)現(xiàn)原理，可能有其它復(fù)雜的功能適用sync。

這只是一個(gè)簡(jiǎn)單的例子，看完這個(gè)不知你是不覺(jué)得有個(gè)指令跟這個(gè)很相似，v-model？對(duì)，就是v-model在組件上使用的時(shí)候。
具體的可以查看：vue 自定義組件使用v-model，可以實(shí)現(xiàn)同樣的功能。也是以這個(gè)彈窗事件做演示的