VUE開發中.sync 修飾符的作用

其實這個修飾符就是vue封裝了  子組件要修改父組件傳過來的動態值的語法糖，省去了父組件需要寫的方法，但是子組件emit時要加上update

官方解釋：↓

在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源。

看代碼：

// 這里父組件，要給子組件傳一個title的值
<template>
    <div>   
        <t-title :title.sync="fatherTitle"></t-title>
    </div>
</template>
<script>
import tTitle from './blocks/list';
export default {
    name: 'test1',
    components: {  tTitle },
    data() {
        return {
            fatherTitle: '父組件給的標題'
        };
    },
}
</script>

　　這時候當我們在子組件內部的方法想去修改這個標題

// 子組件
<template>
    <div>
        <h3>{{ title }}</h3>
        <button @click="changeTitle">改變</button>
    </div>
</template>
<script>
export default {
    props:{
        title: {type: String, default: '默認值11'}
    },
    methods: {
        changeTitle() {
            this.$emit("update:title", "子組件要改自己的標題");
        }
    }
};
</script>

這里關鍵就是emit里的參數要寫成'update'+ ':' +'要修改的props'

　　這樣就可以了，父組件就不要再去寫個方法接受這個值然后再去改傳的參數，是不是很方便