一、v-model是什么

v-model是Vue框架的一種內(nèi)置的API指令，本質(zhì)是一種語法糖寫法，它負責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。在Vue中，v-model是用于在表單元素和組件之間創(chuàng)建雙向數(shù)據(jù)綁定的指令。它可以簡化表單元素的綁定，使得在用戶輸入時能夠自動更新數(shù)據(jù)。

v-model是value+input的語法糖，是v-band和v-on的簡潔寫法。v-model就實現(xiàn)了雙向數(shù)據(jù)綁定，實際上它就是通過Vue提供的事件機制。即在子組件通過$emit()觸發(fā)一個事件，在父組件使用v-model即可。

二、什么是語法糖

在計算機科學(xué)中，語法糖（syntactic sugar）是指編程語言中可以更容易地表達一個操作的語法。它可以使程序員更加容易地使用這門語言，使操作變得更加清晰、方便，或者更加符合程序員的編程習(xí)慣。

具體來說，語法糖是語言中的一個構(gòu)件，當(dāng)去掉該構(gòu)件后并不影響語言的功能和表達能力。例如，C語言中的標(biāo)記a[i]就是*(a+i)的語法糖。

語言的處理器，包括編譯器，靜態(tài)分析器等，經(jīng)常會在處理之前把語法糖構(gòu)件轉(zhuǎn)換成更加基礎(chǔ)的構(gòu)件，這個過程通常被稱為"desugaring"。

簡而言之，語法糖就是一種便捷寫法。例如：input.map(a => a-8); 去掉語法糖就是：input.map(function (a) { return a - 8; }); 通過例子你可以看出來，語法糖的使用其實就是讓我們的寫的代碼更簡單，看起來也更容易理解。

三、v-model常見的用法

單向數(shù)據(jù)綁定:
在Vue中，我們可以使用v-bind實現(xiàn)單項的數(shù)據(jù)綁定，也就是通過父組件向子組件傳入數(shù)據(jù) ，但是反過來，子組件不可以修改父組件傳遞過來的數(shù)據(jù) ，這也就是所謂的單向數(shù)據(jù)綁定。

雙向數(shù)據(jù)綁定
v-bind和v-on實現(xiàn)了雙向綁定實現(xiàn)了雙向數(shù)據(jù)綁定。

1、對于輸入框（input）：

<input type="text" v-bind:value="value" v-on:input="value = $event.target.value" />

或

<input type="text" :value="value" @input="value = $event.target.value" />

v-model是v-bind和v-on的語法糖，即，v-model算是v-band和v-on的簡潔寫法。

<input type="text" v-model="value" />

在這個例子中，v-model將輸入框的值與數(shù)據(jù)對象中的value屬性進行了綁定。當(dāng)用戶輸入時，value的值會自動更新。

2、對于復(fù)選框（checkbox）：

<input v-model="checked" type="checkbox">

在這個例子中，v-model將復(fù)選框的選中狀態(tài)與數(shù)據(jù)對象中的checked屬性進行了綁定。當(dāng)用戶選中或取消選中復(fù)選框時，checked的值會自動更新。

3、對于選擇框（select）：

<select v-model="selected">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>

在這個例子中，v-model將選擇框的值與數(shù)據(jù)對象中的selected屬性進行了綁定。當(dāng)用戶選擇一個選項時，selected的值會自動更新為所選選項的value值。

4、對于組件（component）：

父組件

<template>
    <div>
        <child-component v-model="message"></child-component>
        <p>Message from parent component: {{ message }}</p>
    </div>
</template>  
    
<script>
import ChildComponent from './childComponent.vue';

export default {
    data() {
        return {
            message: 'hello world'
        };
    },
    components: {
        ChildComponent
    }
};
</script>

子組件

<template>
    <div>
        <p>Message from parent component: {{ value }}</p>
        <button type="button" @click="updateValue">更新</button>
    </div>
</template>  
    
<script>
export default {
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    methods: {
        updateValue() {
            this.$emit("input", 'update message');
        }
    }
};
</script>

在這個例子中，父組件將message屬性綁定到子組件的value屬性上，并使用v-model指令來實現(xiàn)雙向數(shù)據(jù)綁定。子組件內(nèi)部點擊按鈕更新message，并使用$emit()觸發(fā)一個事件，從而更新父組件的message屬性。

除了以上的例子，v-model還可以用于其他表單元素和組件，如文本域（textarea）、開關(guān)（switch）等。它的工作原理是監(jiān)聽表單元素的輸入事件，將輸入值同步到綁定的數(shù)據(jù)屬性上，同時當(dāng)數(shù)據(jù)屬性的值發(fā)生變化時，也會自動更新表單元素的值。

需要注意的是，v-model使用的數(shù)據(jù)屬性通常應(yīng)該是響應(yīng)式對象或數(shù)組，這樣才能夠?qū)崿F(xiàn)數(shù)據(jù)的雙向綁定。如果使用非響應(yīng)式對象或數(shù)組，v-model可能無法正常工作。

四、v-model修飾符

v-model有一些常用的修飾符，它們可以用來控制v-model的行為。使用這些修飾符可以讓我們更方便地控制v-model的行為，提高開發(fā)效率。

以下是一些常用的v-model修飾符：

<input v-model.lazy="message">  
<input v-model.number="message">  
<input v-model.trim="message">

• .lazy：用于實現(xiàn)懶加載，只有當(dāng)輸入框獲取焦點時才會更新綁定的數(shù)據(jù)。
• .number：我們的輸入將自動將輸入轉(zhuǎn)為字符串—即使我們將輸入是數(shù)字。確保將值作為數(shù)字處理的一種方法是使用. number修飾符。根據(jù)Vue文檔，如果輸入發(fā)生變化，并且parseFloat()無法解析新值，那么將返回輸入的最后一個有效值。
• .trim：與大多數(shù)編程語言中的trim方法類似，.trim修飾符在返回值之前刪除開頭或結(jié)尾的空格。

五、v-model 僅僅是語法糖嗎？

v-model不僅僅是語法糖，它還具有創(chuàng)建響應(yīng)式數(shù)據(jù)的功能。v-model將組件的value屬性和input事件進行綁定，實現(xiàn)數(shù)據(jù)的雙向綁定。同時，v-model還可以創(chuàng)建響應(yīng)式數(shù)據(jù)，例如在表單元素上綁定一個不存在的屬性，v-model會自動創(chuàng)建該屬性，并且該屬性是響應(yīng)式的。因此，v-model的作用不僅僅是語法糖，還包括創(chuàng)建響應(yīng)式數(shù)據(jù)和實現(xiàn)數(shù)據(jù)的雙向綁定。

舉個例子：

<template>  
  <div>  
    <input type="text" v-model="user.age">  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      user:{
        name:"張三"	
      }
    };  
  }  
};  
</script>

在這個例子中，響應(yīng)式數(shù)據(jù)user中沒有定義 user.age 屬性，但是 template 里卻用 v-model 綁定了 user.age，v-model會在user 上新增 age 屬性，并且 age 這個屬性還是響應(yīng)式的。

六、v-model 是單向數(shù)據(jù)流嗎？

雖然官方?jīng)]有明確表示這點，但我們可以捋一捋兩者的關(guān)系。

• 什么是單項數(shù)據(jù)流？
  子組件不能改變父組件傳遞給它的 prop 屬性，推薦的做法是它拋出事件，通知父組件自行改變綁定的值。

• v-model 的做法是怎樣的？
  v-model 做法完全符合單項數(shù)據(jù)流。甚至于，它給出了一種在命名和事件定義上的規(guī)范。

單向數(shù)據(jù)流』總結(jié)起來其實也就8個字：『數(shù)據(jù)向下，事件向上』。

七、如何讓自定義組件支持 v-model？

一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value 屬性 用于不同的目的。model 選項可以用來避免這樣的沖突。

在定義 vue 組件時，你可以提供一個 model 屬性，用來定義該組件以何種方式支持 v-model。

model 屬性本身是有默認值的，如下：

// 默認的 model 屬性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

也就是說，如果你不定義 model 屬性，或者你按照上面方法定義屬性，當(dāng)其他人使用你的自定義組件時，v-model=“foo” 就完全等價于 :value=“foo” 加上 @input=“foo = $event”。

讓我們看個例子。

先定義一個自定義組件：

<template>
    <div>
        當(dāng)前數(shù)量是{{ count }}
        <el-button @click="changeCount(1)">加</el-button>
        <el-button @click="changeCount(-1)">減</el-button>
    </div>
</template>
<script>
export default {
    props: {
        count: {
            type: Number,
            default: 1
        },
    },
    // // 自定義v-model的格式
    model: {
        prop: 'count',// 代表 v-model 綁定的prop名
        event: 'input'// 代碼 v-model 通知父組件更新屬性的事件名
    },
    methods: {
        changeCount(step) {
            const newCount = this.count + step
            this.$emit('input', newCount)
        },
    }
}
</script>

然后我們在父組件中使用該組件：

<template>
    <div>
        <child-component v-model="count"></child-component>
    </div>
</template>
<script>
import ChildComponent from './childComponent.vue';
export default {
    data() {
        return {
            count: 6
        };
    },
    components: {
        ChildComponent
    }
};
</script>

在這個例子中，這里的 count 的值將會傳入這個名為 count 的 prop。同時當(dāng) 觸發(fā)一個 changeCount 事件并附帶一個新的值的時候，這個 count 的 property 將會被更新。

注意你仍然需要在組件的 props 選項里聲明 count 這個 prop。文章來源地址http://www.zghlxwxcb.cn/news/detail-805521.html

到了這里，關(guān)于vue中內(nèi)置指令v-model的作用和常見使用方法介紹以及在自定義組件上支持的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！