首先看到 .sync 我們需要知道這是個修飾器 類似修飾器還有 .stop .prevent 之類

　　其實這個修飾符就是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'

　　以前是用的this.$emit("自定義方法")

　　更多關于“前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的好程序員班，高品質課程助力你實現程序員夢想。