props/$emit組件通信及語法糖的使用

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組件的通信