Vue的v-model指令有什么用？如何自定義表單組件？

v-model 是 vue 中用于表單元素和組件間建立雙向數(shù)據(jù)綁定的指令，能實(shí)現(xiàn)輸入內(nèi)容與數(shù)據(jù)自動(dòng)同步。其基本用法是綁定 input 或 textarea 的值，如 ，使 message 與輸入框內(nèi)容保持一致；在自定義組件中使用時(shí)，需通過(guò) model 選項(xiàng)聲明 prop 和 Event，并用 $emit(‘input’) 更新父組件數(shù)據(jù)；與 .sync 修飾符不同，v-model 只綁定一個(gè)值，而 .sync 支持多個(gè)屬性的雙向綁定；開(kāi)發(fā)自定義表單組件時(shí)應(yīng)支持 v-model、傳遞原生屬性、處理事件透?jìng)鳎蕴嵘M件易用性和兼容性。掌握 v-model 能顯著提高表單類組件開(kāi)發(fā)效率和規(guī)范性。

v-model 在 vue 中是一個(gè)非常實(shí)用的指令，它主要用來(lái)在表單元素和組件之間建立雙向數(shù)據(jù)綁定。簡(jiǎn)單來(lái)說(shuō)，就是當(dāng)你在輸入框中輸入內(nèi)容時(shí)，對(duì)應(yīng)的數(shù)據(jù)會(huì)自動(dòng)更新；反過(guò)來(lái)，如果數(shù)據(jù)發(fā)生變化，輸入框中的值也會(huì)同步變化。

這在開(kāi)發(fā)表單功能時(shí)特別方便，比如你有一個(gè)輸入框，想讓它的內(nèi)容和某個(gè)變量保持一致，用 v-model 就可以輕松實(shí)現(xiàn)。

一、v-model 的基本用法

最常見(jiàn)的使用場(chǎng)景是直接作用在 或 上：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

<input v-model="message"> <p>{{ message }}</p>

上面這段代碼的意思是：輸入框的內(nèi)容和 message 這個(gè)變量始終保持一致。用戶輸入的時(shí)候，message 自動(dòng)更新；如果你在 JS 中修改了 message，輸入框的內(nèi)容也會(huì)跟著變。

除了文本輸入，v-model 也適用于復(fù)選框、單選按鈕等表單控件，用法類似，只是綁定的值類型會(huì)有所不同。

二、如何在自定義組件中使用 v-model？

Vue 的組件默認(rèn)不支持 v-model，但我們可以手動(dòng)模擬它的行為。

一個(gè)標(biāo)準(zhǔn)的做法是：父組件通過(guò) v-model 綁定一個(gè)值到子組件，子組件通過(guò) model 選項(xiàng)聲明這個(gè)綁定，并通過(guò) $emit(‘input’) 來(lái)通知父組件更新數(shù)據(jù)。

舉個(gè)例子，我們來(lái)寫(xiě)一個(gè)簡(jiǎn)單的自定義輸入組件：

<!-- 子組件 MyInput.vue --> <template>   <input :value="value" @input="$emit('input', $event.target.value)"> </template>  <script> export default {   model: {     prop: 'value',     event: 'input'   },   props: ['value'] } </script>

然后在父組件里這樣使用：

<MyInput v-model="message" />

這樣就實(shí)現(xiàn)了和原生 input 一樣的雙向綁定效果。

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

有些同學(xué)可能會(huì)混淆 v-model 和 .sync 修飾符，這里簡(jiǎn)單說(shuō)一下它們的不同點(diǎn)：

• v-model 是一種語(yǔ)法糖，只能綁定一個(gè)值（通常是 value + input 事件）。
• .sync 是用來(lái)處理多個(gè)屬性的雙向綁定，適合需要同步多個(gè) prop 的情況。

例如：

<MyComponent :title.sync="pageTitle" />

這時(shí)候子組件要觸發(fā) update:title 事件才能更新父組件的數(shù)據(jù)。

所以，如果你只需要同步一個(gè)值，優(yōu)先用 v-model；如果是多個(gè)值，可以用 .sync 或者直接用 emit 手動(dòng)控制。

四、自定義表單組件的小技巧

有時(shí)候我們會(huì)封裝一些復(fù)雜的表單組件，比如帶下拉選擇的時(shí)間輸入、帶格式校驗(yàn)的輸入框等等。這種情況下，為了讓組件能更好地融入 Vue 的生態(tài)，建議做到以下幾點(diǎn)：

1. 支持 v-model：讓使用者能像操作普通 input 一樣使用你的組件；
2. 傳遞原生屬性：比如 placeholder、disabled、readonly 等，可以通過(guò) v-bind=”$attrs” 直接傳給內(nèi)部的 ；
3. 處理 focus/blur 等事件：如果有必要，記得把這些事件也透?jìng)鞒鋈ィ層脩裟鼙O(jiān)聽(tīng)到。

這些細(xì)節(jié)做不到位的話，組件雖然能用，但在項(xiàng)目中體驗(yàn)會(huì)差一些。

基本上就這些了。v-model 雖然看起來(lái)簡(jiǎn)單，但在實(shí)際開(kāi)發(fā)中非常常用，特別是做表單類組件時(shí)，掌握好它的用法能讓你的組件更易用、更規(guī)范。