深入解讀Vue修飾符sync

 看到好多人在問這個問題，特意翻了翻以前的筆記，寫了一篇比較詳細的博文供大家參考

  在一些情況下，我們可能會需要對一個 prop （父子元件傳遞資料的屬性） 進行“雙向綁定”。

  在vue 1.x 中的 .sync 修飾符所提供的功能。當一個子元件改變了一個帶 .sync 的prop的值時，這個變化也會同步到父元件中所綁定的值。

  這很友善，但也會導緻問題，因為它破壞了單向資料流。（資料自上而下流，事件自下而上走）

  由于子元件改變 prop 的代碼和普通的狀體改動代碼毫無差別，是以當你光看子元件的代碼時，你完全不知道它合适悄悄地改變了父元件的狀态。

<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。

  前端的學習不是一蹴而就，不積跬步無以至千裡，不積小流無以成江海。持續不斷的努力才能讓你我有所收獲，專業的知識還得到機構去學習，教育訓練機構的設立有其存在的必然性，你錢花對了嗎？