props/$emit

子组件想要显示父组件的数据，就props。 子组件想要改变父组件的数据，就$emit。

v-model语法糖

v-model是 属性value 和 事件input 的语法糖。

适用于：触发事件返回的值 正是 属性要改的值，一般是单一属性。比如触发事件返回的值正好就是该属性的新值；

适用于：表单类的组件，因为属性和事件默认是value和input

.sync语法糖

.sync语法糖默认是 属性xxx 和 事件update:xxx

适用于触发事件返回的值 正是 属性要改的值，一般是单一属性

适用于：非表单类的组件

v-modal:xxx语法糖

vue3新增，取代了.sync语法糖

父组件的变化：

原生写法：父组件监听update:checked事件并接收子组件传入的值

.sync语法糖写法：其中的prop属性为checked，event事件为update:checked

v-model:xxx语法糖写法：prop属性为checked，event事件为update:checked

子组件没有变化，仍然是props接收父组件传入的属性值，通过$emit触发事件返回属性的值。

总结

props/$emit是父子组件最常用的通信方式，而v-model、.sync只是其语法糖

vue3后都开始使用v-modal:xxx语法糖；

语法糖的缺点是子组件只是单一的修改某个父组件值，复杂逻辑还是老实用props/$emit

其实语法糖只是在父组件用的时候更加方便，而子组件该咋样还是咋样。

参考

props/$emit、v-model、.sync的适用场景 -- vue组件通信系列

vue3中v-model的重大更新

总结Vue组件的通信