目錄
前言：
回憶基本的原生用法：
原生input的封裝：
自定義v-model參數(shù)：
對(duì)el-input的二次封裝：
多個(gè)v-model進(jìn)行綁定:
v-model修飾符：
v-model自定義參數(shù)與自定義修飾符的結(jié)合：
前言：
? ? ? ? 提起v-model，想必都不陌生，作為vue的經(jīng)典語(yǔ)法，幫助我們?cè)诰帉戫?xiàng)目的時(shí)候，省了很多很多的事情，本文著重記錄v-model在組件上的綁定使用！
回憶基本的原生用法：
使用原生的input，我們一般這么寫：
<input type="text" v-model="name">此種寫法相當(dāng)于以下寫法：
<input type="text" :value="name" @input="e=> name = e.target.value">
<input type="text" :value="name" @input="name = $event.target.value">?而當(dāng)我們?cè)谝粋€(gè)組件上使用v-model的寫法時(shí)，實(shí)際寫法時(shí)長(zhǎng)這個(gè)樣子：
<custom-input :model-value="name" @update:modelValue="newValue=>name = newValue"></custom-input>請(qǐng)注意model-value與@update:modelValue并不是我規(guī)定的，而是vue規(guī)定的！
于是乎，我們?nèi)绻雽懗蛇@樣使用，那就需要將組件內(nèi)部的input value值與modelValue進(jìn)行綁定。
當(dāng)原生的input時(shí)間觸發(fā)時(shí)，利用@update:modelValue將新值攜帶出去！
<custom-input v-model="name"></custom-input>原生input的封裝：
<template>
<div>modelValue: <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"></div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue"
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>或者另一種寫法：
<template>
<div>modelValue: <input v-model="value"></div>
</template>
<script setup>
import {defineProps,defineEmits,computed} from "vue"
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const value = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
}
})
</script>
兩種寫法都可，這樣我們就可以引入我們的自定義的組件，采用如此寫法
<template>
<custom-input v-model="name"></custom-input>
<div>name:{{name}}</div>
</template>
<script setup>
import {ref} from "vue";
import CustomInput from "./components/custom-input/index.vue";
const name = ref('')
</script>
自定義v-model參數(shù)：
在默認(rèn)的情況下，組件的都是使用modelValue作為自己的prop，使用update:modelValue作為對(duì)應(yīng)的更新事件，有時(shí)候我們需要去改動(dòng)一哈！
基本規(guī)則就是，自定義的prop：xxx, 對(duì)應(yīng)的更新事件：update:xxx, 組件上就變成了v-model:xxx的寫法，下面以value舉例
<template>
<div>自定義v-model的參數(shù)，例：value: <input :value="value" @input="$emit('update:value', $event.target.value)"></div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
const props = defineProps(['value'])
const emit = defineEmits(['update:value'])
</script>
那么我們?cè)诮M件上使用就變成了這樣子：
<custom-input v-model:value="name"></custom-input>
所以，當(dāng)我們使用element-plus中的el-input組件時(shí)，會(huì)發(fā)現(xiàn)是這樣的寫法
當(dāng)使用Naive UI或者Ant Design Vue中的input組件時(shí)，會(huì)發(fā)現(xiàn)是這樣寫法
?
總得來(lái)說(shuō)，就是element-plus用了默認(rèn)的，而另外兩個(gè)對(duì)其進(jìn)行了自定義參數(shù)，而且參數(shù)是value！
至于另外一種使用computed的寫法，依照最基礎(chǔ)的版本，進(jìn)行編輯即可！
對(duì)el-input的二次封裝：
在正常寫項(xiàng)目的時(shí)候，一般都會(huì)選擇一個(gè)適用項(xiàng)目的ui框架，不管是element-plus或者naive等等，我們不可能說(shuō)自己去寫一個(gè)原生的input組件進(jìn)行封裝，除非你的input長(zhǎng)得特別奇特。。。大部分情況下，我們對(duì)ui組件庫(kù)的組件進(jìn)行二次封裝即可，更多的可能是業(yè)務(wù)上的封裝。
這里以el-input舉例，上面說(shuō)到，el-input其實(shí)是用的默認(rèn)的參數(shù)modelValue,我們通過(guò)閱讀el-input文檔也可以看出來(lái)---el-input；
?故，當(dāng)我們?cè)趯?duì)el-input進(jìn)行二次封裝的時(shí)候，需要這么寫：
<template>
<div>
modelValue:
<el-input :model-value="modelValue" @input="$emit('update:modelValue',$event)" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
如果你是用的Naive UI組件庫(kù)，那么在你對(duì)n-input組件進(jìn)行二次封裝的時(shí)候,就需要使用value，update:value了，其他的組件庫(kù)也是如此！
多個(gè)v-model進(jìn)行綁定:
當(dāng)我們?cè)谧远x的組件中寫了多個(gè)輸入框或者是其他之類的表單式組件，那就必須在組件上使用多個(gè)v-model，這個(gè)時(shí)候默認(rèn)的modelValue已經(jīng)不夠我們使用了，所以我們必須要進(jìn)行自定義v-model參數(shù)。很簡(jiǎn)單，寫一起就ok！
<template>
<div>
modelValue:
<el-input :model-value="modelValue" @input="$emit('update:modelValue',$event)" />
</div>
<div>
自定義v-model的參數(shù)，例：value:
<el-input :model-value="value" @input="$emit('update:value',$event)" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
const props = defineProps(['modelValue', 'value'])
const emit = defineEmits(['update:modelValue', 'update:value'])
</script>
<template>
<custom-el-input v-model="name" v-model:value="desc"></custom-el-input>
<div>name:{{name}}</div>
<div>desc:{{desc}}</div>
</template>
<script setup>
import CustomElInput from "./components/custom-el-input/index.vue"
import {ref} from "vue";
const name = ref('')
const desc = ref('')
</script>
v-model修飾符：
關(guān)于v-model的修飾符，知道有一些內(nèi)置的修飾符，例如.trim，.number之類的。有時(shí)候，我們需要自定義修飾符，看下面的例子！
有個(gè)需求：要求當(dāng)你在輸入框中輸入 “千玨” 二字的時(shí)候，就變成 *** 。此修飾符，我決定命名為.replace，寫出來(lái)的效果是這個(gè)樣子的！
<custom-el-input v-model.replace="name"></custom-el-input>那么組件內(nèi)部該如何去寫?
首先我們需要在props里面寫上默認(rèn)的modelValue，其次我們還需要添加上modelModifiers,這個(gè)也是默認(rèn)的，和modelValue都是配套的，注意modelModifiers的默認(rèn)值是一個(gè)空對(duì)象！
<template>
<div>modelValue:
<el-input :model-value="modelValue" @input="input" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue";
const props = defineProps({
modelValue: String,
modelModifiers: {default: () => ({})}
})
const emit = defineEmits(['update:modelValue'])
/* 將 千玨 關(guān)鍵字代替為 *** 字 */
const input = (value) => {
console.log(props);
}
</script>
打印props可以看到如下內(nèi)容，
?當(dāng)我們?cè)诮M件上使用 v-model.replace時(shí)，在此處replace為true，那我們就可以愉快的進(jìn)行下一步了，這里我使用了lodash的_replace方法:lodash的_replace
/* 將 千玨 關(guān)鍵字代替為 *** 字 */
const input = (value) => {
const replace = props.modelModifiers.replace
const keyWord = '千玨'
const replaceWord = '***'
if (replace) {
value = _replace(value, keyWord, replaceWord)
}
emit('update:modelValue', value)
}頁(yè)面展示就會(huì)長(zhǎng)這個(gè)樣子：***就是千玨了，嘿嘿！
v-model自定義參數(shù)與自定義修飾符的結(jié)合：
需求又來(lái)了:當(dāng)我們輸入小寫字母時(shí)，自動(dòng)變?yōu)閷?duì)應(yīng)的大寫字母。
對(duì)于此種情況，modelValue與modelModifiers當(dāng)然就不能再用了。此時(shí)的規(guī)則就是，我們自定義一個(gè)參數(shù)xxx,而對(duì)應(yīng)的modelModifiers將變成xxxModifiers,這里以value舉例，props就會(huì)有兩個(gè)參數(shù)，value和valueModifiers。
<template>
<div>自定義v-model的參數(shù)，例：value:
<el-input :model-value="value" @input="input" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue";
import _toUpper from "lodash/toUpper"
const props = defineProps({
value: String,
valueModifiers: {
default: () => ({})
}
})
const emit = defineEmits(['update:value'])
/* 將 小寫字母 轉(zhuǎn)化為 大寫字母 */
const input = (value) => {
const toUpper = props.valueModifiers.toUpper
if (toUpper) {
value = _toUpper(value)
}
emit('update:value', value)
}
</script>
組件使用：
<custom-el-input v-model:value.toUpper="desc"></custom-el-input>
?此時(shí)，我們?nèi)绾屋斎胄懽帜付紩?huì)被自動(dòng)轉(zhuǎn)化為大寫，這就成功了！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-752218.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-752218.html
到了這里，關(guān)于Vue3：有關(guān)v-model的用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
