v-model和.sync区别-CSDN博客

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