v-model 可以在組件上(shàng)使用(yòng)以實現(xiàn)雙向綁定。
首先讓我們回憶一下(xià) v-model 在原生元素上(shàng)的用(yòng)法：
template
<input v-model="searchText" />
在代碼背後，模闆編譯器會(huì)對(duì) v-model 進行更冗長的等價展開(kāi)。因此上(shàng)面的代碼其實等價于下(xià)面這(zhè)段：
template
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
而當使用(yòng)在一個組件上(shàng)時(shí)，v-model 會(huì)被展開(kāi)爲如下(xià)的形式：
template
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>
要讓這(zhè)個例子實際工(gōng)作(zuò)起來(lái)，<CustomInput> 組件内部需要做兩件事(shì)：
将内部原生 <input> 元素的 value attribute 綁定到(dào) modelValue prop
當原生的 input 事(shì)件觸發時(shí)，觸發一個攜帶了(le)新值的 update:modelValue 自(zì)定義事(shì)件
這(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>
現(xiàn)在 v-model 可以在這(zhè)個組件上(shàng)正常工(gōng)作(zuò)了(le)：
template
<CustomInput v-model="searchText" />
另一種在組件内實現(xiàn) v-model 的方式是使用(yòng)一個可寫的，同時(shí)具有 getter 和(hé) setter 的 computed 屬性。get 方法需返回 modelValue prop，而 set 方法需觸發相應的事(shì)件：
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 的參數
默認情況下(xià)，v-model 在組件上(shàng)都是使用(yòng) modelValue 作(zuò)爲 prop，并以 update:modelValue 作(zuò)爲對(duì)應的事(shì)件。我們可以通過給 v-model 指定一個參數來(lái)更改這(zhè)些(xiē)名字：
template
<MyComponent v-model:title="bookTitle" />
在這(zhè)個例子中，子組件應聲明(míng)一個 title prop，并通過觸發 update:title 事(shì)件更新父組件值：
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 綁定
利用(yòng)剛才在 v-model 參數小(xiǎo)節中學到(dào)的指定參數與事(shì)件名的技巧，我們可以在單個組件實例上(shàng)創建多個 v-model 雙向綁定。
組件上(shàng)的每一個 v-model 都會(huì)同步不同的 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>
處理(lǐ) v-model 修飾符
在學習輸入綁定時(shí)，我們知(zhī)道(dào)了(le) v-model 有一些(xiē)内置的修飾符，例如 .trim，.number 和(hé) .lazy。在某些(xiē)場景下(xià)，你(nǐ)可能(néng)想要一個自(zì)定義組件的 v-model 支持自(zì)定義的修飾符。
我們來(lái)創建一個自(zì)定義的修飾符 capitalize，它會(huì)自(zì)動将 v-model 綁定輸入的字符串值第一個字母轉爲大(dà)寫：
template
<MyComponent v-model.capitalize="myText" />
組件的 v-model 上(shàng)所添加的修飾符，可以通過 modelModifiers prop 在組件内訪問到(dào)。在下(xià)面的組件中，我們聲明(míng)了(le) modelModifiers 這(zhè)個 prop，它的默認值是一個空(kōng)對(duì)象：
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 且其值爲 true，因爲它在模闆中的 v-model 綁定 v-model.capitalize="myText" 上(shàng)被使用(yòng)了(le)。
有了(le)這(zhè)個 prop，我們就可以檢查 modelModifiers 對(duì)象的鍵，并編寫一個處理(lǐ)函數來(lái)改變抛出的值。在下(xià)面的代碼裏，我們就是在每次 <input /> 元素觸發 input 事(shì)件時(shí)将值的首字母大(dà)寫：
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>
對(duì)于又有參數又有修飾符的 v-model 綁定，生成的 prop 名将是 arg + "Modifiers"。舉例來(lái)說：
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 }
}
}
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發