vue修飾符v-model及.sync的原理是什么

這篇文章主要介紹了vue修飾符v-model及.sync的原理是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue修飾符v-model及.sync的原理是什么文章都會有所收獲，下面我們一起來看看吧。

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的原理是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。