vue中的.sync修飾符的使用

在說vue 修飾符sync前，我們先看下官方文檔： vue .sync 修飾符，里面說vue .sync 修飾符以前存在於vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 發布之后的實際應用中，我們發現 .sync 還是有其適用之處，比如在開發可復用的組件庫時。我們需要做的只是讓子組件改變父組件狀態的代碼更容易被區分。從 2.3.0 起我們重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監聽器。
示例代碼如下：

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

會被展開為：

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

當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

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

下邊我么通過一個實例（彈窗的關閉事件）來說明這個代碼到底是怎么運用的。

<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>默認初始值是{{show}}，所以是顯示的</p>
                    <button @click.stop="closeDiv">關閉</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //觸發 input 事件，並傳入新值
        }
      }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

動態效果圖如下：

 

vue 修飾符sync的功能是：當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定。如果我們不用.sync，我們想做上面的那個彈窗功能，我們也可以props傳初始值，然后事件監聽，實現起來也不算復雜。這里用sync實現，只是給大家提供一個思路，讓其明白他的實現原理，可能有其它復雜的功能適用sync。

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

轉發自： https://www.jianshu.com/p/6b062af8cf01