props/$emit

子元件想要顯示父元件的資料，就props。 子元件想要改變父元件的資料，就$emit。

v-model語法糖

• v-model是 屬性value 和 事件input 的語法糖。
• 適用於：觸發事件返回的值 正是 屬性要改的值，一般是單一屬性。比如觸發事件返回的值正好就是該屬性的新值；
• 適用於：表單類的元件，因為屬性和事件預設是value和input

.sync語法糖

• .sync語法糖預設是 屬性xxx 和 事件update:xxx
• 適用於觸發事件返回的值 正是 屬性要改的值，一般是單一屬性
• 適用於：非表單類的元件

v-modal:xxx語法糖

• vue3新增，取代了.sync語法糖
• 父元件的變化：

 原生寫法：父元件監聽update:checked事件並接收子元件傳入的值
 <custom-checkbox :checked="selectFramework" @update:checked="selectFramework = $event"></custom-checkbox>
 
 .sync語法糖寫法：其中的prop屬性為checked，event事件為update:checked
 <custom-checkbox :checked.sync="selectFramework"></custom-checkbox>
 
 v-model:xxx語法糖寫法：prop屬性為checked，event事件為update:checked
 <custom-checkbox v-model:checked="selectFramework"></custom-checkbox>
 
 

• 子元件沒有變化，仍然是props接收父元件傳入的屬性值，通過$emit觸發事件返回屬性的值。

總結

• props/$emit是父子元件最常用的通訊方式，而v-model、.sync只是其語法糖
• vue3後都開始使用v-modal:xxx語法糖；
• 語法糖的缺點是子元件只是單一的修改某個父元件值，複雜邏輯還是老實用props/$emit
• 其實語法糖只是在父元件用的時候更加方便，而子元件該咋樣還是咋樣。

參考

1. props/$emit、v-model、.sync的適用場景 -- vue元件通訊系列
2. vue3中v-model的重大更新
3. 總結Vue元件的通訊