v-model和.sync区别

在vue2中提供了.sync修饰符，但是在vue3中不再支持.sync，取而代之的是v-model。

1.在vue2中v-model和.sync区别：

1.相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
​ 区别在于往回传值的时候. sync 的 $emit 所调用的事件名必须是update:属性名。
2.格式不同：v-model=“num”, :num.sync=“num”
​ v-model： @input + value
​ :num.sync: @update:num
3.v-model只能用一次；.sync可以有多个

2. .sync修饰符的作用

.sync能够实现属性间的一个双向绑定。比如说现在我们有一个这个组件，然后上面有一个v-bind="title"这样的一个属性。
如果说写成v-bind:title.sync="title"，那么它可以看做是一个语法糖，它会隐式的向子组件里面传递一个v-on:update="title"这样的一个事件，也就是说

<my-dialog :title.sync="title"></my-dialog>

等价于

<my-dialog :title="title" @update="title=> title = newTitle"></my-dialog>

然后在子组件里面传过去调用$emit(update:title)冒号title来去修改父组件里面所绑定的值。它是能够实现属性间的一个双向绑定。

//my-dialog.vue
<template>
    <input :value="title" @update="$emit('update:title', $event.target.value)"/>
</template>

官方文档关于这部分的参考：https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

3 问题：v-model只能用于表单组件是吗？即使用在自定义组件中，子组件里面也必须是表单组件？

v-model在页面中不只是能用于表单控件<input>, <textarea> and <select>中。除此之前还可以使用到自定义组件中。

父组件使用了v-model以后，自定义组件里面，也不止限于表单组件。v-model其实只是一个语法糖，和子组件是不是表单组件没有关系。v-model="name" 其实是其实是v-bind:name="name"和v-on:update="name=>newName=name"的语法缩写。
比如说，就算是在子组件中input控件可以实现双绑也是因为使用了:value="name"和@input="$emit('update:name', $event.target.value)"，其实是内部对这个v-model进行了再次处理。
而对于div等这种，也可以通过$emit()的形式通知父组件然后由父组件对值进行修改。
总得来说就是v-model可以使用在表单或者自定义组件上。但是自定义组件里面的内容，针对表单和非表单控件，要做不同的处理才能实现数据双绑。

//父组件
 <my-dialog v-model:name="name"></my-dialog>
 //子组件：
   <input
    type="text"
    :value="name"
    @input="$emit('update:name', $event.target.value)"
  />
defineProps(['name'])
defineEmits(['update:name'])

4.vue3在自定义组件中的v-model写法

<CustomInput v-model="searchText"></CustomInput>

 等价于：

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

子组件中：

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

 

4.题：vue2中的v-bind:name.sync的用法是不是和vue3中v-model在自定义组件中的用法一样的？

vue2和vue3中v-model最大的区别就是对.sync修饰符进行了改写，v-model中整合了.sync修饰符的功能

<text-document v-bind:title.sync="title"></text-document>

就相当于

<text-document
  v-bind:title="title"
  v-on:update:title="title = $event"
></text-document>