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

Posted on by

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的資料請關註WalkonNet其它相關文章！

推薦閱讀：