VUE3 之多个 v-model 绑定及 v-model 修饰符的使用

目录1. 概述2. 多个 v-model 绑定3. v-mode 修饰符4. 综述5. 个人公众号1. 概述洛克定律告诉我们：当我们的目标很远大，远到我们都看不到终点时，放弃几率就会很大，就像跑马拉松比赛，由于时间长、距离长，很多选手都会选择在中途放弃。其实有个好办法，就是拆分，把大目标拆分成很多的小目标，这些小目标都是能够看到终点的，让自己有一种努力一下就能完成目标的感觉，当把所有的小目标完成后

追风人聊Java

9887人浏览 · 2022-01-26 17:18:30

追风人聊Java · 2022-01-26 17:18:30 发布

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。