Vue之.sync 修飾符詳解

背景交代

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

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

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

這在 debug 複雜結構的應用時會帶來很高的維護成本。于是我們在 vue 2.0 中移除了 .sync 。

但是在實際應用中，我們發現 .sync 還是有其适用之處的，比如在開發可複用的元件庫時。 我們需要做的隻是 讓子元件改變父元件狀态的代碼更容易被區分。

于是從 vue 2.3.0 開始，我們重新引入了 .sync 修飾符，但是這次它隻是作為一個編譯時的文法糖存在。他會被自動擴充為一個 自動更新父元件屬性的 v-on 監聽器。

了解

示例代碼：

會被拓展為：

當子元件需要更新 foo 的值的時候，他需要顯示的觸發一個更新事件：

注意：

有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)。

v-bind與.sync一起使用時不能簡寫為：

html:.sync="doc.title"

示例

<template>
    <div class="details">
        <myComponent :show.sync='valueChild'></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>
           

參考資料：

https://cn.vuejs.org/v2/guide/components-custom-events.html