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 - 其实语法糖只是在父组件用的时候更加方便，而子组件该咋样还是咋样。