v-model和sync注意点：当组件有插槽时，用双标签写，那么一看就知道此组件含有插槽内容。组件无插槽时，用单标签写

v-model和sync

vue其实崇尚单向数据流，子组件不能更新父组件的值

但是v-model和sync都能让子组件更新父组件的值，这是怎么回事呢？

其实v-model和sync都是语法糖，本质还是单向数据流

v-model像子组件传值值，子组件要用value接收，并触发父组件的input事件去更新值

<!--父组件-->
<Input v-model="user" />

<!--子组件-->
<input type="text" :value="value" @input="$emit('input',$event.target.value)" />

v-model本质是value属性传值和@input事件的语法糖

 <Input :value="user" @input="user = $event" />

注意点：当组件有插槽时，用双标签写，那么一看就知道此组件含有插槽内容。组件无插槽时，用单标签写

<!--此组件无插槽-->
<Input v-model="user" />
<!--此组件有插槽-->
<Input v-model="user"></Input>

sync和v-model一样，都能让子组件更新父组件的状态

子组件可用任意参数接受，更新父组件状态时事件名称为 update:[状态]

<!--父组件-->
<Input :user.sync="user" />

<!--子组件-->
<input type="text" :value="user" @input="$emit('update:user',$event.target.value)" />

sync本质是任意属性传值和@update:[属性]事件的语法糖

<Input :user="user" @update:user="user = $event"/>

v-model 通常用于输入框等表单元素

sync通常用于非表单元素如模态框，弹出框等