1. General

Locke's law tells us:

When our goal is so great that we can't see the end, there will be a great chance to give up. Just like running a marathon, because of the long time and long distance, many players will choose to give up halfway.

In fact, a good way is to split the big goal into many small goals. These small goals can see the end point, so that you can feel that you can complete the goal with one effort. When all the small goals are completed, the big goal will be completed naturally.

 

To get back to business, in the last section, we talked about several ways for child components to modify parent component data. Today, we continue to talk about some more advanced usage.

 

2. Multiple v-model bindings

2.1 review v-model mode and modify the value of parent component data

    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>
        `
    });

This is an example of modifying the num passed by the parent component by using v-model at the end of our previous section.

Here, the parent component only passes one parameter to the child component. If the parent component passes two or more parameters to the child component, students should already know how to do it. Let's look at the following example

 

2.2 multiple v-model bindings

    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>
        `
    });

This example is very simple. When using the test sub component, the parent component uses < test V-model: num1 = "num1" V-model: num2 = "num2" / > to pass two parameters num1 and num2 to the sub component.

In the event method of the subcomponent, use this$ emit('update:num1', this.num1 + 1); And this$ emit('update:num2', this.num2 + 2); Modify the values of num1 and num2. Add 1 for each click of num1 and 2 for each click of num2.

 

3. v-mode modifier

3.1 initial knowledge of v-model modifier

    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>
        `
    });

When using the test subcomponent, the main component uses the < test V-model: num.double = "num" / > code to pass parameters. There is a new knowledge in this code, that is, the double modifier, which is a self-defined modifier, and the name is taken at will.

When the child component receives the parameters of the parent component, it receives not only num, but also {numModifiers.

Note that props needs to receive parameters as objects.

The naming rule of numModifiers is parameter + Modifiers. Because the parameter is named num, here is numModifiers.

numModifiers needs to specify a default value. Default: () = > ({}), () = > ({}) means that nothing is done by default. If the default value is not specified, an error will be reported if the modifier is not specified when the parent component passes parameters

Finally, use {if(this.numModifiers.double) in the event method to determine whether the double modifier is used. If so, num will be multiplied by 2.

Here is just a simple example. You can do many different things according to the specified modifiers, such as capitalization of letters, capitalization of initial letters, execution of a special calculation of numbers, etc.

 

 

3.2 multiple parameters contain modifiers

If multiple parameters contain the same or different modifiers, how to write them? In fact, it's very simple. Just follow the cat and draw the tiger

    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>
        `
    });

Here we add a num2 parameter. The num2 parameter uses the triple modifier, which is also a user-defined modifier. The name is taken at will.

The test subcomponent receives num2 and num2Modifiers in the same way.

Finally, use {if(this.num2Modifiers.triple) in the event method to judge whether the triple modifier is used. If so, multiply num2 by 3.

 

 

4. Overview

Today, I talked about several v-model bindings of VUE3 and the use of v-model modifiers. I hope it can be helpful to your work. In the next section, we will continue to talk about the relevant knowledge of components. Please look forward to it

Welcome to help, like, comment, forward and pay attention:)

Pay attention to those who follow the wind to talk about Java and update Java dry goods every day.

 

5. official account

Fans talk about Java. Welcome to pay attention