网站建设职责要求,服装网站建设工作室,联合建设官方网站,网站栏目名目录
前言#xff1a;
回忆基本的原生用法#xff1a;
原生input的封装#xff1a;
自定义v-model参数#xff1a;
对el-input的二次封装#xff1a;
多个v-model进行绑定:
v-model修饰符#xff1a;
v-model自定义参数与自定义修饰符的结合#xff1a; 前言
回忆基本的原生用法
原生input的封装
自定义v-model参数
对el-input的二次封装
多个v-model进行绑定:
v-model修饰符
v-model自定义参数与自定义修饰符的结合 前言 提起v-model想必都不陌生作为vue的经典语法帮助我们在编写项目的时候省了很多很多的事情本文着重记录v-model在组件上的绑定使用
回忆基本的原生用法
使用原生的input我们一般这么写
input typetext v-modelname
此种写法相当于以下写法
input typetext :valuename inpute name e.target.value
input typetext :valuename inputname $event.target.value 而当我们在一个组件上使用v-model的写法时实际写法时长这个样子
custom-input :model-valuename update:modelValuenewValuename newValue/custom-input
请注意model-value与update:modelValue并不是我规定的而是vue规定的 于是乎我们如果想写成这样使用那就需要将组件内部的input value值与modelValue进行绑定。 当原生的input时间触发时利用update:modelValue将新值携带出去 custom-input v-modelname/custom-input
原生input的封装
templatedivmodelValue: input :valuemodelValue input$emit(update:modelValue, $event.target.value)/div
/templatescript setupimport { defineProps, defineEmits } from vueconst props defineProps([modelValue])const emit defineEmits([update:modelValue])
/script
或者另一种写法
templatedivmodelValue: input v-modelvalue/div
/templatescript setupimport {defineProps,defineEmits,computed} from vueconst props defineProps([modelValue])const emit defineEmits([update:modelValue])const value computed({get() {return props.modelValue},set(value) {emit(update:modelValue, value)}})
/script
两种写法都可这样我们就可以引入我们的自定义的组件采用如此写法
templatecustom-input v-modelname/custom-inputdivname:{{name}}/div
/templatescript setupimport {ref} from vue;import CustomInput from ./components/custom-input/index.vue;const name ref()
/script自定义v-model参数
在默认的情况下组件的都是使用modelValue作为自己的prop使用update:modelValue作为对应的更新事件有时候我们需要去改动一哈
基本规则就是自定义的propxxx, 对应的更新事件update:xxx, 组件上就变成了v-model:xxx的写法下面以value举例
templatediv自定义v-model的参数例value: input :valuevalue input$emit(update:value, $event.target.value)/div
/templatescript setupimport {defineProps,defineEmits} from vueconst props defineProps([value])const emit defineEmits([update:value])
/script那么我们在组件上使用就变成了这样子
custom-input v-model:valuename/custom-input 所以当我们使用element-plus中的el-input组件时会发现是这样的写法 当使用Naive UI或者Ant Design Vue中的input组件时会发现是这样写法 总得来说就是element-plus用了默认的而另外两个对其进行了自定义参数而且参数是value
至于另外一种使用computed的写法依照最基础的版本进行编辑即可
对el-input的二次封装
在正常写项目的时候一般都会选择一个适用项目的ui框架不管是element-plus或者naive等等我们不可能说自己去写一个原生的input组件进行封装除非你的input长得特别奇特。。。大部分情况下我们对ui组件库的组件进行二次封装即可更多的可能是业务上的封装。
这里以el-input举例上面说到el-input其实是用的默认的参数modelValue,我们通过阅读el-input文档也可以看出来---el-input 故当我们在对el-input进行二次封装的时候需要这么写
templatedivmodelValue:el-input :model-valuemodelValue input$emit(update:modelValue,$event) //div
/templatescript setupimport {defineProps,defineEmits} from vueconst props defineProps([modelValue])const emit defineEmits([update:modelValue])
/script如果你是用的Naive UI组件库那么在你对n-input组件进行二次封装的时候,就需要使用valueupdate:value了其他的组件库也是如此
多个v-model进行绑定:
当我们在自定义的组件中写了多个输入框或者是其他之类的表单式组件那就必须在组件上使用多个v-model这个时候默认的modelValue已经不够我们使用了所以我们必须要进行自定义v-model参数。很简单写一起就ok
templatedivmodelValue:el-input :model-valuemodelValue input$emit(update:modelValue,$event) //divdiv自定义v-model的参数例value:el-input :model-valuevalue input$emit(update:value,$event) //div
/templatescript setupimport {defineProps,defineEmits} from vueconst props defineProps([modelValue, value])const emit defineEmits([update:modelValue, update:value])
/scripttemplatecustom-el-input v-modelname v-model:valuedesc/custom-el-inputdivname:{{name}}/divdivdesc:{{desc}}/div/templatescript setupimport CustomElInput from ./components/custom-el-input/index.vueimport {ref} from vue;const name ref()const desc ref()
/scriptv-model修饰符
关于v-model的修饰符知道有一些内置的修饰符例如.trim.number之类的。有时候我们需要自定义修饰符看下面的例子
有个需求要求当你在输入框中输入 “千珏” 二字的时候就变成 *** 。此修饰符我决定命名为.replace写出来的效果是这个样子的
custom-el-input v-model.replacename/custom-el-input
那么组件内部该如何去写?
首先我们需要在props里面写上默认的modelValue其次我们还需要添加上modelModifiers,这个也是默认的和modelValue都是配套的注意modelModifiers的默认值是一个空对象
templatedivmodelValue:el-input :model-valuemodelValue inputinput //div
/templatescript setupimport {defineProps,defineEmits} from vue;const props defineProps({modelValue: String,modelModifiers: {default: () ({})}})const emit defineEmits([update:modelValue])/* 将 千珏 关键字代替为 *** 字 */const input (value) {console.log(props);}
/script打印props可以看到如下内容 当我们在组件上使用 v-model.replace时在此处replace为true那我们就可以愉快的进行下一步了这里我使用了lodash的_replace方法:lodash的_replace /* 将 千珏 关键字代替为 *** 字 */const input (value) {const replace props.modelModifiers.replaceconst keyWord 千珏const replaceWord ***if (replace) {value _replace(value, keyWord, replaceWord)}emit(update:modelValue, value)}
页面展示就会长这个样子***就是千珏了嘿嘿 v-model自定义参数与自定义修饰符的结合
需求又来了:当我们输入小写字母时自动变为对应的大写字母。
对于此种情况modelValue与modelModifiers当然就不能再用了。此时的规则就是我们自定义一个参数xxx,而对应的modelModifiers将变成xxxModifiers,这里以value举例props就会有两个参数value和valueModifiers。
templatediv自定义v-model的参数例value:el-input :model-valuevalue inputinput //div
/templatescript setupimport {defineProps,defineEmits} from vue;import _toUpper from lodash/toUpperconst props defineProps({value: String,valueModifiers: {default: () ({})}})const emit defineEmits([update:value])/* 将 小写字母 转化为 大写字母 */const input (value) {const toUpper props.valueModifiers.toUpperif (toUpper) {value _toUpper(value)}emit(update:value, value)}
/script组件使用
custom-el-input v-model:value.toUpperdesc/custom-el-input 此时我们如何输入小写字母都会被自动转化为大写这就成功了
