vue修飾符v-model及.sync原理及區別詳解

2022-07-26 18:00:48

v-model的原理

v-model的本質,其實就是:value和@input事件的語法糖

    <!--v-model寫法-->
    <my-component type="text" v-model="num">
    <!--展開語法糖後的寫法-->
    <my-component type="text"
      :value="num"
      @input="(value) => num = value"
    >

父元件通過向子元件傳值和自定義事件,子元件裡面通過$emit去觸發input事件

注意點: 在子元件中這個input事件是自定義事件

// 在子元件中
<template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('input',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

.sync的原理

// 在父元件中
    <my-component :value.sync="num" />

// 子元件中
    <template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('update:value',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

兩者本質都是一樣，並沒有任何區別： “監聽一個觸發事件”="(val) => value = val"。

v-model和.sync修飾符的區別

.sync與v-model區別是

相同點：都是語法糖，都可以實現父子元件中的資料的雙向通訊。

區別點：

格式不同。 v-model="num", :num.sync="num"
v-model： @input + value
:num.sync: @update:num
v-model只能用一次；.sync可以有多個。

只不過v-model預設對應的是input或者textarea等元件的input事件，如果在子元件替換這個input事件，其本質和.sync修飾符一模一樣。比較單一，不能有多個。

// 子元件可以用自定義事件，來替換v-model預設對應的原生input事件，只不過我們需要在子元件手動 $emit
model: {
        prop: "value",
        event: "update"
},

一個元件可以多個屬性用.sync修飾符，可以同時"雙向繫結多個“prop”，而並不像v-model那樣，一個元件只能有一個。

因為使用v-model,子元件中只能觸發一個input事件,事件名是唯一的,而.sync修飾符,它觸發的時間名是updata:屬性名,所以它有多個事件名,就可以使用多次

總結作用場景：

props/$emit是父子元件最常用的通訊方式，而v-model、.sync只是其語法糖
子元件只是單一的修改某個父元件值的話，表單類元件使用v-model語法糖
子元件只是單一的修改某個父元件值的話，非表單類元件使用sync語法糖
複雜邏輯還是老老實實props/$emit

其實語法糖只是在父元件用的時候更加方便，而子元件該咋樣還是咋樣。

以上就是vue修飾符v-model及.sync原理及區別詳解的詳細內容，更多關於vue修飾符v-model .sync的資料請關注it145.com其它相關文章！

vue修飾符v-model及.sync原理及區別詳解

目錄

v-model的原理

.sync的原理

v-model和.sync修飾符的區別

總結作用場景：

熱門文章