VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用
目录
1. 概述
2. 多个 v-model 绑定
3. v-mode 修饰符
4. 综述
5. 个人公众号
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，欢迎大家关注
VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用相关推荐
- Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件 与 父组件传递数据给子组件 -- 方式props ...
- vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
- Vue绑定数据v-bind缩写:字段名 双向绑定v-model缩写:model 监听动作v-on缩写@ 记住：与数据相关用冒号 与动作相关用@
v-bind绑定数据缩写 : v-bind 指令可以用于响应式地更新 HTML 特性: <span v-bind:title="message"> <span : ...
- angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
- ASP.NET MVC Model绑定小结
Model绑定是指从URL提取数据,生成对应Action方法的参数这个过程.前面介绍的一系列Descriptor负责提供了控制器,行为方法和参数的元数据,ValueProvieder负责获取数据,剩下 ...
- ASP.NET MVC Model绑定(二)
ASP.NET MVC Model绑定(二) 前言 上篇对于Model绑定的简单演示想必大家对Model绑定的使用方式有一点的了解,那大家有没有想过Model绑定器是在什么时候执行的?又或是执行的过程 ...
- ASP.NET MVC Model绑定(四)
ASP.NET MVC Model绑定(四) 前言 前面的篇幅对于Model绑定器IModelBinder以及实现类型.Model绑定器提供程序都作了粗略的讲解,可以把Model绑定器想象成一个大的容 ...
- 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换...
重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换 原文: ...
- ASP.NET MVC Model绑定(五)
ASP.NET MVC Model绑定(五) 前言 前面的篇幅对于IValueProvider的获取位置和所处的生成过程做了解说,本篇将会对IValueProvider的使用做个基础的演示样例解说,读 ...
- ModelBinder——ASP.NET MVC Model绑定的核心
Model的绑定体现在从当前请求提取相应的数据绑定到目标Action方法的参数.通过前面的介绍我们知道Action方法的参数通过ParameterDescriptor来描述,ParameterDesc ...
最新文章
- leetcode算法题--旋转链表
- [转载] 管Q某犇借的手写堆
- TRUNCATE,DELETE,DROP的区别
- 家门口的医疗新体验，网易云信携手嘉虹健康打造互联网医院新场景
- oracle blob字段索引,在oracle 数据库中使用 Blob 字段存储 一张图片并读取
- python suds 调用webservice 缓存
- python之路day04--列表的增删改查，嵌套、元组的嵌套、range、for循环嵌套
- arcgis python 教程-终于晓得arcgis-python入门教程
- HTML右下角音乐播放器,利用HTML5实现网页底部音乐播放器代码
- SNDACode介绍
- 哪有什么太迟，世界多的是大器晚成
- Linux第7章Gdk及Cairo基础,Linux第7章Gdk及Cairo基础概要1.ppt
- css 商城 两列_你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
- 20189200余超 2018-2019-2 移动平台应用开发实践第八周作业
- 关于北大青鸟????
- ecg 幅度_ECG原理与综述.ppt
- SAP 汇兑损益的结转
- D.Starry的神奇魔法(矩阵快速幂)
- linux启动mysql1820_linux下安装mysql的问题解决
- 敏捷模式下的团队测试能力构建