在Vue2中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>

5.题：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>

到此这篇关于在Vue2中v-model和.sync区别的文章就介绍到这了,更多相关vue v-model和.sync区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论