VUE3 之 多個 v-model 繫結及 v-model 修飾符的使用 - 這個系列的教程通俗易懂，適合新手

追風人聊Java發表於2022-01-26
Vue

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，歡迎大家關注

 

相關文章