VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂，适合新手
1. 概述
洛克定律告诉我们：
当我们的目标很远大，远到我们都看不到终点时，放弃几率就会很大，就像跑马拉松比赛，由于时间长、距离长，很多选手都会选择在中途放弃。
其实有个好办法，就是拆分，把大目标拆分成很多的小目标，这些小目标都是能够看到终点的，让自己有一种努力一下就能完成目标的感觉，当把所有的小目标完成后，大目标自然也就完成了。
言归正传，上一节我们聊了子组件修改父组件数据的几种方式，今天我们继续聊一些更高级的用法。
2. 多个 v-model 绑定
2.1 回顾 v-model 方式，修改父组件数据的值
const app = Vue.createApp({
data() {
return {
num : 1
}
},
template:`
<div>
<test v-model:num="num" />
</div>
`
});
app.component("test", {
props:['num'],
methods : {
incrNum() {
this.$emit('update:num', this.num + 1);
}
},
template:`
<div @click="incrNum" >{{num}}</div>
`
});
这是我们上一节的最后，使用 v-model 的方式修改父组件传递过来的 num 的例子。
这里父组件只传了一个参数给子组件，那如果父组件传递两个或多个参数给子组件呢，同学们应该已经知道怎么做了吧，我们看下面的例子
2.2 多个 v-model 绑定
const app = Vue.createApp({
data() {
return {
num1 : 1,
num2 : 1
}
},
template:`
<div>
<test v-model:num1="num1" v-model:num2="num2"/>
</div>
`
});
app.component("test", {
props:['num1', 'num2'],
methods : {
incrNum1() {
this.$emit('update:num1', this.num1 + 1);
},
incrNum2() {
this.$emit('update:num2', this.num2 + 2)
}
},
template:`
<div @click="incrNum1" >{{num1}}</div>
<div @click="incrNum2" >{{num2}}</div>
`
});
这个例子很简单，父组件在使用 test 子组件时使用 <test v-model:num1="num1" v-model:num2="num2"/> 传递了两个参数 num1、num2 给子组件。
子组件在事件方法中，使用 this.$emit('update:num1', this.num1 + 1); 和 this.$emit('update:num2', this.num2 + 2); 修改 num1、num2 的值，num1每次点击加1，num2每次点击加2。
3. v-mode 修饰符
3.1 初识 v-model 修饰符
const app = Vue.createApp({
data() {
return {
num : 1
}
},
template:`
<div>
<test v-model:num.double="num" />
</div>
`
});
app.component("test", {
props:{'num': Number, 'numModifiers': {
default: () => ({})
}},
methods : {
incrNum() {
let newValue = this.num;
if(this.numModifiers.double) {
newValue = newValue * 2;
}
this.$emit('update:num', newValue);
}
},
template:`
<div @click="incrNum" >{{num}}</div>
`
});
主组件在使用 test 子组件时，使用 <test v-model:num.double="num" /> 代码传参，在这段代码中有一个新知识，就是 double 修饰符，这是我们自定义的一个修饰符，名称是随意取的。
子组件接收父组件参数时，不仅接收了 num，还接收了 numModifiers。
注意，这里 props 需要以对象的方式接收参数。
numModifiers 的命名规则是 参数+Modifiers，因为参数的命名是 num，所以这里是 numModifiers。
numModifiers 需要指定一个默认值 default: () => ({}) ，() => ({}) 意思是默认什么都不做，如果不指定默认值的话，当父组件传参时，没有指定修饰符，则会报错
最后在事件方法中使用 if(this.numModifiers.double) 判断是否使用了 double 修饰符，如果使用了，num 就乘 2。
这里只是举了一个简单的例子，可以根据指定的修饰符的不同，做很多不同的事情，例如：字母变大写，字母首字母大写，数字执行某个特殊计算等等。
3.2 多个参数包含修饰符
如果多个参数包含相同或不同的修饰符，该如何写呢，其实很简单，照猫画虎就可以
const app = Vue.createApp({
data() {
return {
num : 1,
num2 : 1
}
},
template:`
<div>
<test v-model:num.double="num" v-model:num2.triple="num2" />
</div>
`
});
app.component("test", {
props:{
'num': Number,
'numModifiers': {
default: () => ({})
},
'num2': Number,
'num2Modifiers': {
default: () => ({})
},
},
methods : {
incrNum() {
let newValue = this.num;
if(this.numModifiers.double) {
newValue = newValue * 2;
}
this.$emit('update:num', newValue);
},
incrNum2() {
let newValue = this.num2;
if(this.num2Modifiers.triple) {
newValue = newValue * 3;
}
this.$emit('update:num2', newValue);
}
},
template:`
<div @click="incrNum" >{{num}}</div>
<div @click="incrNum2" >{{num2}}</div>
`
});
这里我们增加了一个 num2 参数，num2 参数使用了 triple（三倍） 修饰符，这也是个自定义的修饰符，名称是随意取的。
test 子组件用同样的方式接收 num2 和 num2Modifiers。
最后在事件方法中使用 if(this.num2Modifiers.triple) 判断是否使用了 triple 修饰符，如果使用了就把 num2 乘 3。
4. 综述
今天聊了一下 VUE3 的 多个 v-model 绑定及 v-model 修饰符的使用，希望可以对大家的工作有所帮助，下一节我们继续讲组件的相关知识，敬请期待
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
5. 个人公众号
追风人聊Java，欢迎大家关注
最新文章
- 使用Docker Mysql 5.7
- Delphi 10.1 Berlin 官方未列之修正
- lodash的源码(1)
- HDU 1175 连连看
- [PE结构分析] 11.资源表结构
- TCP粘包
- java利用zxing编码解码一维码与二维码
- pyqt5 笔记（三）py2exe 实现代码打包exe
- C结构体之位域（位段）
- Apache下PHP的几种工作方式
- firefox关于about:config的常用配置
- HDU1506_Largest Rectangle in a Histogram
- wemall app商城源码Fragment中监听onKey事件
- web worker 扫盲篇
- Robot Framework - Tips
- caffe调试
- python---读取/写入excel用例数据
- 如何配置IIS使其支持APK文件的下载
- IDEA Exception in thread "main" java.lang.ClassNotFoundException: com.streamax.servicecore.business.FileManageServApplication
- 最简单的解决Chrome浏览器主页被hao123、360和2345篡改的方法是什么
热门文章
- windows10下vscode+cmake编译Qt5代码
- 【LeetCode】210. Course Schedule II 解题报告（Python）
- 【LeetCode】467. Unique Substrings in Wraparound String 解题报告（Python）
- Java用sort实现对数组的降序排序
- 【Java笔记】zipInputStream使用注意
- Java EE数据持久化框架 • 【第2章 MyBatis实现DML操作】
- 《手把手教你》系列技巧篇（五十五）-java+ selenium自动化测试-上传文件-下篇（详细教程）
- mysql yum无法安装的原因
- 详解nginx的请求限制（连接限制和请求限制）
- mongodb基础整理篇————常规操作[二]