Vue 自定義組件 v-model 使用詳解
Vue2中使用
一個(gè)組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件,但是像單選框、復(fù)選框等類型的輸入控件可能會(huì)將 value attribute 用于不同的目的。model 選項(xiàng)可以用來避免這樣的沖突:
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > })
現(xiàn)在在這個(gè)組件上使用 v-model 的時(shí)候:
<base-checkbox v-model="lovingVue"></base-checkbox>
這里的 lovingVue 的值將會(huì)傳入這個(gè)名為 checked 的 prop。同時(shí)當(dāng) 觸發(fā)一個(gè) change 事件并附帶一個(gè)新的值的時(shí)候,這個(gè) lovingVue 的 property 將會(huì)被更新。
注意你仍然需要在組件的 props 選項(xiàng)里聲明 checked 這個(gè) prop。
Vue3中使用
v-model 使用 modelValue
自定義事件可以用于開發(fā)支持 v-model 的自定義表單組件?;貞浺幌?v-model 在原生元素上的用法:
<input v-model="searchText" />
上面的代碼其實(shí)等價(jià)于下面這段 (編譯器會(huì)對 v-model 進(jìn)行展開):
<input :value="searchText" @input="searchText = $event.target.value" />
而當(dāng)使用在一個(gè)組件上時(shí),v-model 會(huì)被展開為如下的形式:
<CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" />
要讓這個(gè)例子實(shí)際工作起來, 組件內(nèi)部需要做兩件事:
- 將內(nèi)部原生 input 元素的 value attribute 綁定到 modelValue prop
- 輸入新的值時(shí)在 input 元素上觸發(fā) update:modelValue 事件
這里是相應(yīng)的代碼:
<!-- 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 也可以在這個(gè)組件上正常工作了:
<CustomInput v-model="searchText" />
另一種在組件內(nèi)實(shí)現(xiàn) v-model 的方式是使用一個(gè)可寫的,同時(shí)具有 getter 和 setter 的計(jì)算屬性。get 方法需返回 modelValue prop,而 set 方法需觸發(fā)相應(yīng)的事件:
<!-- 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ù)
默認(rèn)情況下,v-model 在組件上都是使用 modelValue 作為 prop,并以 update:modelValue 作為對應(yīng)的事件。我們可以通過給 v-model 指定一個(gè)參數(shù)來更改這些名字:
<MyComponent v-model:title="bookTitle" />
在這個(gè)例子中,子組件應(yīng)聲明一個(gè) title prop,并通過觸發(fā) update:title 事件更新父組件值:
<!-- 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>
多個(gè) v-model 綁定
利用剛才在 v-model 參數(shù)小節(jié)中學(xué)到的技巧,我們可以在一個(gè)組件上創(chuàng)建多個(gè) v-model 雙向綁定,每一個(gè) v-model 都會(huì)同步不同的 prop:
<UserName v-model:first-name="first" v-model:last-name="last" /> <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 的修飾符
在學(xué)習(xí)輸入綁定時(shí),我們知道了 v-model 有一些內(nèi)置的修飾符,例如 .trim,.number 和 .lazy。在某些場景下,你可能想要一個(gè)自定義組件的 v-model 支持自定義的修飾符。
我們來創(chuàng)建一個(gè)自定義的修飾符 capitalize,它會(huì)自動(dòng)將 v-model 綁定輸入的字符串值第一個(gè)字母轉(zhuǎn)為大寫:
<MyComponent v-model.capitalize="myText" />
組件的 v-model 上所添加的修飾符,可以通過 modelModifiers prop 在組件內(nèi)訪問到。在下面的組件中,我們聲明了 modelModifiers 這個(gè) prop,它的默認(rèn)值是一個(gè)空對象:
<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>
注意這里組件的 modelModifiers
prop 包含了 capitalize
且其值為 true,因?yàn)樗谀0逯械?v-model 綁定上被使用了。
有了 modelModifiers
這個(gè) prop,我們就可以在原生事件偵聽函數(shù)中檢查它的值,然后決定觸發(fā)的自定義事件中要向父組件傳遞什么值。在下面的代碼里,我們就是在每次 元素觸發(fā) input 事件時(shí)將值的首字母大寫:
<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”。舉例來說:
<MyComponent v-model:title.capitalize="myText">
相應(yīng)的聲明應(yīng)該是:
export default { props: ['title', 'titleModifiers'], emits: ['update:title'], created() { console.log(this.titleModifiers) // { capitalize: true } } }
到此這篇關(guān)于Vue 自定義組件 v-model 使用介紹的文章就介紹到這了,更多相關(guān)Vue 自定義組件 v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用 Element UI Table 的 slot-scope方法
這篇文章主要介紹了使用 Element UI Table 的 slot-scope方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10elementui實(shí)現(xiàn)表格自定義排序的示例代碼
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式 父子組件通信
這篇文章主要介紹了vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式 父子組件通信,需要的朋友可以參考下2019-08-08詳解element-ui設(shè)置下拉選擇切換必填和非必填
這篇文章主要介紹了詳解element-ui設(shè)置下拉選擇切換必填和非必填,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06淺談element中InfiniteScroll按需引入的一點(diǎn)注意事項(xiàng)
這篇文章主要介紹了淺談element中InfiniteScroll按需引入的一點(diǎn)注意事項(xiàng),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法示例
這篇文章主要介紹了vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09vue使用video.js實(shí)現(xiàn)播放m3u8格式的視頻
這篇文章主要為大家詳細(xì)介紹了vue如何使用video.js實(shí)現(xiàn)播放m3u8格式的視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12Vue使用sign-canvas實(shí)現(xiàn)在線手寫簽名的實(shí)例
sign-canvas?一個(gè)基于?canvas?開發(fā),封裝于?Vue?組件的通用手寫簽名板(電子簽名板),支持?pc?端和移動(dòng)端,本文給大家分享Vue使用sign-canvas實(shí)現(xiàn)在線手寫簽名,感興趣的朋友一起看看吧2022-05-05