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

1.在vue2中v-model和.sync區(qū)別：

1.相同點(diǎn)：都是語(yǔ)法糖，都可以實(shí)現(xiàn)父子組件中的數(shù)據(jù)的雙向通信。
? 區(qū)別在于往回傳值的時(shí)候. sync 的 $emit 所調(diào)用的事件名必須是update:屬性名。
2.格式不同：v-model=“num”, :num.sync=“num”
? v-model： @input + value
? :num.sync: @update:num
3.v-model只能用一次；.sync可以有多個(gè)

2. .sync修飾符的作用

.sync能夠?qū)崿F(xiàn)屬性間的一個(gè)雙向綁定。比如說(shuō)現(xiàn)在我們有一個(gè)這個(gè)組件，然后上面有一個(gè)v-bind="title"這樣的一個(gè)屬性。
如果說(shuō)寫(xiě)成v-bind:title.sync="title"，那么它可以看做是一個(gè)語(yǔ)法糖，它會(huì)隱式的向子組件里面?zhèn)鬟f一個(gè)v-on:update="title"這樣的一個(gè)事件，也就是說(shuō)

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

等價(jià)于

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

然后在子組件里面?zhèn)鬟^(guò)去調(diào)用$emit(update:title)冒號(hào)title來(lái)去修改父組件里面所綁定的值。它是能夠?qū)崿F(xiàn)屬性間的一個(gè)雙向綁定。

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

官方文檔關(guān)于這部分的參考：https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

3 問(wèn)題：v-model只能用于表單組件是嗎？即使用在自定義組件中，子組件里面也必須是表單組件？

v-model在頁(yè)面中不只是能用于表單控件<input>, <textarea> and <select>中。除此之前還可以使用到自定義組件中。

父組件使用了v-model以后，自定義組件里面，也不止限于表單組件。v-model其實(shí)只是一個(gè)語(yǔ)法糖，和子組件是不是表單組件沒(méi)有關(guān)系。v-model="name" 其實(shí)是其實(shí)是v-bind:name="name"和v-on:update="name=>newName=name"的語(yǔ)法縮寫(xiě)。
比如說(shuō)，就算是在子組件中input控件可以實(shí)現(xiàn)雙綁也是因?yàn)槭褂昧?value="name"和@input="$emit('update:name', $event.target.value)"，其實(shí)是內(nèi)部對(duì)這個(gè)v-model進(jìn)行了再次處理。
而對(duì)于div等這種，也可以通過(guò)$emit()的形式通知父組件然后由父組件對(duì)值進(jìn)行修改。
總得來(lái)說(shuō)就是v-model可以使用在表單或者自定義組件上。但是自定義組件里面的內(nèi)容，針對(duì)表單和非表單控件，要做不同的處理才能實(shí)現(xiàn)數(shù)據(jù)雙綁。

//父組件
 <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寫(xiě)法

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

 等價(jià)于：

<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最大的區(qū)別就是對(duì).sync修飾符進(jìn)行了改寫(xiě)，v-model中整合了.sync修飾符的功能

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

就相當(dāng)于

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

到此這篇關(guān)于在Vue2中v-model和.sync區(qū)別的文章就介紹到這了,更多相關(guān)vue v-model和.sync區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論