v-model的原理

• v-model的本質(zhì),其實(shí)就是:value和@input事件的語法糖

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

父組件通過向子組件傳值和自定義事件,子組件里面通過$emit去觸發(fā)input事件

• 注意點(diǎn): 在子組件中 這個(gè)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
        }
    }
}

兩者本質(zhì)都是一樣，并沒有任何區(qū)別： “監(jiān)聽一個(gè)觸發(fā)事件”="(val) => value = val"。

v-model和.sync修飾符的區(qū)別

.sync與v-model區(qū)別是

相同點(diǎn)：都是語法糖，都可以實(shí)現(xiàn)父子組件中的數(shù)據(jù)的雙向通信。

區(qū)別點(diǎn)：

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

只不過v-model默認(rèn)對應(yīng)的是input或者textarea等組件的input事件，如果在子組件替換這個(gè)input事件，其本質(zhì)和.sync修飾符一模一樣。比較單一，不能有多個(gè)。

// 子組件可以用自定義事件，來替換v-model默認(rèn)對應(yīng)的原生input事件，只不過我們需要在子組件手動 $emit
model: {
        prop: "value",
        event: "update"
},

一個(gè)組件可以多個(gè)屬性用.sync修飾符，可以同時(shí)"雙向綁定多個(gè)“prop”，而并不像v-model那樣，一個(gè)組件只能有一個(gè)。

因?yàn)槭褂胿-model,子組件中只能觸發(fā)一個(gè)input事件,事件名是唯一的,而.sync修飾符,它觸發(fā)的時(shí)間名是updata:屬性名,所以它有多個(gè)事件名,就可以使用多次

總結(jié)作用場景：

• props/$emit是父子組件最常用的通信方式，而v-model、.sync只是其語法糖
• 子組件只是單一的修改某個(gè)父組件值的話，表單類組件使用v-model語法糖
• 子組件只是單一的修改某個(gè)父組件值的話，非表單類組件使用sync語法糖
• 復(fù)雜邏輯還是老老實(shí)實(shí)props/$emit

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

以上就是vue修飾符v-model及.sync原理及區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于vue修飾符v-model .sync的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論