1. 概述
洛克定律告訴我們：
當(dāng)我們的目標(biāo)很遠(yuǎn)大，遠(yuǎn)到我們都看不到終點(diǎn)時(shí)着憨，放棄幾率就會(huì)很大，就像跑馬拉松比賽务嫡，由于時(shí)間長(zhǎng)甲抖、距離長(zhǎng)，很多選手都會(huì)選擇在中途放棄心铃。
其實(shí)有個(gè)好辦法准谚，就是拆分，把大目標(biāo)拆分成很多的小目標(biāo)去扣，這些小目標(biāo)都是能夠看到終點(diǎn)的柱衔，讓自己有一種努力一下就能完成目標(biāo)的感覺(jué)，當(dāng)把所有的小目標(biāo)完成后愉棱，大目標(biāo)自然也就完成了唆铐。
言歸正傳，上一節(jié)我們聊了子組件修改父組件數(shù)據(jù)的幾種方式奔滑，今天我們繼續(xù)聊一些更高級(jí)的用法艾岂。
2. 多個(gè) v-model 綁定
2.1 回顧 v-model 方式，修改父組件數(shù)據(jù)的值
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>
`
});
這是我們上一節(jié)的最后朋其，使用 v-model 的方式修改父組件傳遞過(guò)來(lái)的 num 的例子王浴。
這里父組件只傳了一個(gè)參數(shù)給子組件，那如果父組件傳遞兩個(gè)或多個(gè)參數(shù)給子組件呢梅猿，同學(xué)們應(yīng)該已經(jīng)知道怎么做了吧氓辣，我們看下面的例子
2.2 多個(gè) 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>
`
});
這個(gè)例子很簡(jiǎn)單，父組件在使用 test 子組件時(shí)使用 <test v-model:num1="num1" v-model:num2="num2"/> 傳遞了兩個(gè)參數(shù) num1袱蚓、num2 給子組件筛婉。
子組件在事件方法中，使用 this.$emit('update:num1', this.num1 + 1); 和 this.$emit('update:num2', this.num2 + 2); 修改 num1、num2 的值爽撒，num1每次點(diǎn)擊加1，num2每次點(diǎn)擊加2响蓉。
3. v-mode 修飾符
3.1 初識(shí) 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 子組件時(shí)硕勿，使用 <test v-model:num.double="num" /> 代碼傳參，在這段代碼中有一個(gè)新知識(shí)枫甲，就是 double 修飾符源武，這是我們自定義的一個(gè)修飾符，名稱是隨意取的想幻。
子組件接收父組件參數(shù)時(shí)粱栖，不僅接收了 num，還接收了 numModifiers脏毯。
注意闹究，這里 props 需要以對(duì)象的方式接收參數(shù)。
numModifiers 的命名規(guī)則是 參數(shù)+Modifiers食店，因?yàn)閰?shù)的命名是 num渣淤，所以這里是 numModifiers。
numModifiers 需要指定一個(gè)默認(rèn)值 default: () => ({}) 吉嫩，() => ({}) 意思是默認(rèn)什么都不做价认，如果不指定默認(rèn)值的話，當(dāng)父組件傳參時(shí)自娩，沒(méi)有指定修飾符用踩，則會(huì)報(bào)錯(cuò)
最后在事件方法中使用 if(this.numModifiers.double) 判斷是否使用了 double 修飾符，如果使用了忙迁，num 就乘 2脐彩。
這里只是舉了一個(gè)簡(jiǎn)單的例子，可以根據(jù)指定的修飾符的不同动漾，做很多不同的事情丁屎，例如：字母變大寫(xiě)，字母首字母大寫(xiě)旱眯，數(shù)字執(zhí)行某個(gè)特殊計(jì)算等等晨川。
3.2 多個(gè)參數(shù)包含修飾符
如果多個(gè)參數(shù)包含相同或不同的修飾符，該如何寫(xiě)呢删豺，其實(shí)很簡(jiǎn)單共虑，照貓畫(huà)虎就可以
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>
`
});
這里我們?cè)黾恿艘粋€(gè) num2 參數(shù)，num2 參數(shù)使用了 triple（三倍） 修飾符呀页，這也是個(gè)自定義的修飾符妈拌，名稱是隨意取的。
test 子組件用同樣的方式接收 num2 和 num2Modifiers。
最后在事件方法中使用 if(this.num2Modifiers.triple) 判斷是否使用了 triple 修飾符尘分，如果使用了就把 num2 乘 3猜惋。
4. 綜述
今天聊了一下 VUE3 的 多個(gè) v-model 綁定及 v-model 修飾符的使用，希望可以對(duì)大家的工作有所幫助培愁，下一節(jié)我們繼續(xù)講組件的相關(guān)知識(shí)著摔，敬請(qǐng)期待
歡迎幫忙點(diǎn)贊、評(píng)論定续、轉(zhuǎn)發(fā)谍咆、加關(guān)注 ：）
關(guān)注追風(fēng)人聊Java，每天更新Java干貨私股。
5. 個(gè)人公眾號(hào)
信搜索公眾號(hào)：追風(fēng)人聊Java摹察，歡迎大家關(guān)注
