v-model的原理
v-model的本质,其实就是:value和@input事件的语法糖
**
<!--v-model写法--><my-component type="text" v-model="num"><!--展开语法糖后的写法-->
<my-component type="text" :value="num" @input="(value) => num = value">
父组件通过向子组件传值和自定义事件,子组件里面通过$emit去触发input事件
注意点: 在子组件中 这个input事件是自定义事件
**
// 在子组件中<template lang=""><div><div>{{ num }}</div><button
@click="$emit('input',num + 1)"></button></div></template><script>
export default{props:{num:{type: Number,required: true}}}
.sync的原理
**
// 在父组件中<my-component :value.sync="num" />
**
// 子组件中<template lang=""><div><div>{{ num }}</div><button
@click="$emit('update:value',num + 1)"></button></div>
</template><script>export default {props:{num:{type: Number,required: true}}}
两者本质都是一样，并没有任何区别： “监听一个触发事件”="(val) => value = val"。
v-model和.sync修饰符的区别
.sync与v-model区别是
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：
格式不同。 v-model="num", :num.sync="num"v-model： @input + value:num.sync: @update:numv-model只能用一次；.sync可以有多个。
只不过v-model默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。比较单一，不能有多个。
**
// 子组件可以用自定义事件，来替换v-model默认对应的原生input事件，只不过我们需要在子组件手动
$emitmodel: {prop: "value",event: "update"},
一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。
因为使用v-model,子组件中只能触发一个input事件,事件名是唯一的,而.sync修饰符,它触发的时间名是updata:属性名,所以它有多个事件名,就可以使用多次
总结作用场景：
props/$emit是父子组件最常用的通信方式，而
v-model、.sync只是其语法糖子组件只是单一的修改某个父组件值的话，表单类组件使用
v-model语法糖子组件只是单一的修改某个父组件值的话，
非表单类组件使用sync语法糖复杂逻辑还是老老实实props/$emit
其实语法糖只是在父组件用的时候更加方便
