[01] props.sync

前言

第一篇文章的內容就沒有出現在vue-pattern內XD
收錄這篇文章的原因，是因為這個語法自己沒用過，然後某次面試的時候被問到答不出來(汗
回來之後立馬查了一下，他其實是語法糖，所以習慣使用原生語法後就忘了有這東西~~可惡坑我~~

Vue-pattern 章節: NO
範例程式
專案路徑: views/propsSync
官方文件-sync-Modifier

主題

props.sync = props + v-on事件

同前言提到的，他是一個把父組件內傳遞props跟v-on事件，二合一的語法糖，用以達到子組件可以改變父組件成員變數的值(像是'sync'[同步]的效果)。同時也因為是語法糖，所以綁定的事件名稱會固定是 update:${props}

// index.vue 父層
<div>
    <button @click="addCount" >ADD by parent</button>
    <childA :count="count" @counter-update="addCount" :score.sync="score"/>
</div>

這邊的 score.sync 會拆成 v-bind={score:score} 再加上 @update:score="score = $event"
注: 旁邊的 @counter-update只是對照組，即自訂事件也可以達到同樣的效果

// childA.vue 子層
<div>
    <p>Count:{{count}}</p>
    <button @click="childClick">Add by childA</button>

    <p>Score:{{score}}</p>
    <button @click="scoreClick">Calculate Score</button>
</div>

methods: {
    childClick () {
        console.log('click by childA')
        this.$emit('counter-update', this.count + 1)
    },
    scoreClick () {
        console.log('click by childA-score')
        this.$emit('update:score', this.count * 10)
    }
}

子層大致沒有影響，一樣透過$emit去影響父層，但是$emit的名稱會是update:score