v-model 可(kě)以在組件上(shàng)使用以實現雙向綁定。
首先讓我們回憶一(yī)下(xià) v-model 在原生元素上(shàng)的用法：
template
<input v-model="searchText" />
在代碼背後，模闆編譯器會對 v-model 進行(xíng)更冗長(cháng)的等價展開(kāi)。因此上(shàng)面的代碼其實等價于下(xià)面這(zhè)段：
template
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
而當使用在一(yī)個組件上(shàng)時(shí)，v-model 會被展開(kāi)為(wèi)如(rú)下(xià)的形式：
template
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>
要(yào)讓這(zhè)個例子實際工(gōng)作(zuò)起來，<CustomInput> 組件內(nèi)部需要(yào)做(zuò)兩件事：
将內(nèi)部原生 <input> 元素的 value attribute 綁定到 modelValue prop
當原生的 input 事件觸發時(shí)，觸發一(yī)個攜帶了(le)新值的 update:modelValue 自(zì)定義事件
這(zhè)裏是相應的代碼：
vue
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
現在 v-model 可(kě)以在這(zhè)個組件上(shàng)正常工(gōng)作(zuò)了(le)：
template
<CustomInput v-model="searchText" />
另一(yī)種在組件內(nèi)實現 v-model 的方式是使用一(yī)個可(kě)寫的，同時(shí)具有 getter 和(hé) setter 的 computed 屬性。get 方法需返回 modelValue prop，而 set 方法需觸發相應的事件：
vue
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
</script>
<template>
<input v-model="value" />
</template>
v-model 的參數(shù)
默認情況下(xià)，v-model 在組件上(shàng)都(dōu)是使用 modelValue 作(zuò)為(wèi) prop，并以 update:modelValue 作(zuò)為(wèi)對應的事件。我們可(kě)以通(tōng)過給 v-model 指定一(yī)個參數(shù)來更改這(zhè)些名字：
template
<MyComponent v-model:title="bookTitle" />
在這(zhè)個例子中，子組件應聲明(míng)一(yī)個 title prop，并通(tōng)過觸發 update:title 事件更新父組件值：
vue
<!-- MyComponent.vue -->
<script>
export default {
props: ['title'],
emits: ['update:title']
}
</script>
<template>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>
多個 v-model 綁定
利用剛才在 v-model 參數(shù)小節中學到的指定參數(shù)與事件名的技巧，我們可(kě)以在單個組件實例上(shàng)創建多個 v-model 雙向綁定。
組件上(shàng)的每一(yī)個 v-model 都(dōu)會同步不同的 prop，而無需額外(wài)的選項：
template
<UserName
v-model:first-name="first"
v-model:last-name="last"
/>
vue
<script>
export default {
props: {
firstName: String,
lastName: String
},
emits: ['update:firstName', 'update:lastName']
}
</script>
<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
處理 v-model 修飾符
在學習輸入綁定時(shí)，我們知道(dào)了(le) v-model 有一(yī)些內(nèi)置的修飾符，例如(rú) .trim，.number 和(hé) .lazy。在某些場景下(xià)，你可(kě)能(néng)想要(yào)一(yī)個自(zì)定義組件的 v-model 支持自(zì)定義的修飾符。
我們來創建一(yī)個自(zì)定義的修飾符 capitalize，它會自(zì)動将 v-model 綁定輸入的字符串值第一(yī)個字母轉為(wèi)大寫：
template
<MyComponent v-model.capitalize="myText" />
組件的 v-model 上(shàng)所添加的修飾符，可(kě)以通(tōng)過 modelModifiers prop 在組件內(nèi)訪問(wèn)到。在下(xià)面的組件中，我們聲明(míng)了(le) modelModifiers 這(zhè)個 prop，它的默認值是一(yī)個空對象：
vue
<script>
export default {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
}
</script>
<template>
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
注意這(zhè)裏組件的 modelModifiers prop 包含了(le) capitalize 且其值為(wèi) true，因為(wèi)它在模闆中的 v-model 綁定 v-model.capitalize="myText" 上(shàng)被使用了(le)。
有了(le)這(zhè)個 prop，我們就可(kě)以檢查 modelModifiers 對象的鍵，并編寫一(yī)個處理函數(shù)來改變抛出的值。在下(xià)面的代碼裏，我們就是在每次 <input /> 元素觸發 input 事件時(shí)将值的首字母大寫：
vue
<script>
export default {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
}
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
對于又有參數(shù)又有修飾符的 v-model 綁定，生成的 prop 名将是 arg + "Modifiers"。舉例來說：
template
<MyComponent v-model:title.capitalize="myText">
相應的聲明(míng)應該是：
js
export default {
props: ['title', 'titleModifiers'],
emits: ['update:title'],
created() {
console.log(this.titleModifiers) // { capitalize: true }
}
}
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發