大家好请契！我是木瓜太香乞封！一名前端工程師兢卵，之前寫過一篇《vue父子組件狀態(tài)同步的最佳方式》鳖孤，這篇文章描述了大多數(shù)情況下的父子組件同步的最佳方式者娱，也是被開源中國(guó)官方推薦了，在這里表示感謝苏揣！
這次作為續(xù)章是對(duì)上一篇文章的特殊情況的補(bǔ)充黄鳍，并會(huì)給出較詳細(xì)的描述與代碼演示，當(dāng)然如果你單看這篇文章來(lái)解決特定問題也是可行的平匈。
對(duì)于父子組件狀態(tài)同步框沟，這篇文章 《vue父子組件狀態(tài)同步的最佳方式》 講述了大多數(shù)情況下的最優(yōu)解，但是當(dāng)我們希望自己創(chuàng)建的可復(fù)用組件和封裝的邏輯能夠盡量行為一致的時(shí)候情況可能會(huì)有所不同增炭，舉個(gè)例子忍燥，我們現(xiàn)在要封裝一個(gè)輸入框組件叫做 MyInput 我們知道普通的輸入框通常會(huì)使用 v-model 來(lái)做雙向數(shù)據(jù)綁定，這里如果想讓封裝的 MyInput 組件在使用上與普通的輸入框是一致的隙姿，我們就難免要讓自定義組件也支持 v-model 指令梅垄，這之中其實(shí)本質(zhì)上也會(huì)涉及到父子組件的狀態(tài)同步問題，使用我們之前講的方式也能基本實(shí)現(xiàn)输玷，只是借助 vue 暴露出來(lái)的 api 可以讓我們寫法更優(yōu)雅队丝，接下來(lái)我們使用不同的方式來(lái)實(shí)現(xiàn)這個(gè)組件。
原來(lái)的實(shí)現(xiàn)方式
自定義的MyInput組件
<template>
<div class="myInput">
<!-- 這里只能用 vModel 不可以使用橫杠寫法 -->
<input type="text" :value="vModel" @input="inputHandle">
</div>
</template>
<script>
export default {
name: "MyInput",
props: {
// 這里也可以寫成 'v-model': String 但是建議根據(jù)風(fēng)格來(lái)饲嗽，如果左邊都沒有引號(hào)就直接駝峰
vModel: String
},
methods: {
inputHandle (event) {
// 注意：這里使用 update:v-model 或 update:vModel 都可以
this.$emit("update:v-model", event.target.value)
}
}
}
</script>
使用方式
// 方式一
<my-input :v-model="text" @update:v-model="text = $event"></my-input>
// 方式二
<my-input :v-model.sync="text"></my-input>
可以看到炭玫，原來(lái)的方式也能實(shí)現(xiàn)，但是就使用來(lái)說v-model被當(dāng)成屬性貌虾，一定要在前面加上:才可以用動(dòng)態(tài)屬性吞加，結(jié)果就變成了:v-model，然后我們?yōu)榱撕?jiǎn)化寫法去掉事件綁定尽狠，我們最終的效果就是 :v-model.sync這種寫法總會(huì)讓人覺得怪怪的衔憨，接下來(lái)我們就來(lái)解決這個(gè)問題
vue-api的方式實(shí)現(xiàn)
自定義的MyInput組件
<template>
<div class="myInput">
<input type="text" :value="value" @input="inputHandle">
</div>
</template>
<script>
export default {
name: "MyInput",
props: {
value: String
},
methods: {
inputHandle (event) {
this.$emit("input", event.target.value)
}
}
}
</script>
使用方式
<my-input v-model="text"></my-input>
看到這里可能一部分同學(xué)會(huì)一臉懵逼，這就同步了袄膏？emm践图，其實(shí)還真同步了，那 value 從哪兒來(lái)的沉馆，input 事件也沒綁定啊码党，的確這些都被我們省略掉了德崭，其實(shí)這是 vue 的 api 帶給我們的便利，在我們?cè)噲D向自定義組件傳入 v-model 這個(gè)特殊的屬性的時(shí)候揖盘，vue 會(huì)幫我們做兩件事眉厨，一件是將 v-model 中的值作為 value 的值向下傳遞，這是我們?cè)趦?nèi)部要寫 props value 的原因兽狭，另一件是在當(dāng)前自定義組件上監(jiān)聽 input 事件憾股，并在觸發(fā)改事件的時(shí)候，將第一個(gè)參數(shù)賦值給 v-model 中的變量箕慧。你可以看到在我們?nèi)庋鄄豢梢姷牡胤?vue 為我們做了很多實(shí)際服球，但是大家要明白他為什么給你做這么多，仔細(xì)想想不難看出颠焦，這些邏輯是業(yè)務(wù)場(chǎng)景中重復(fù)次數(shù)很多的邏輯斩熊， vue 不給你做，你自己也要做蒸健，還會(huì)閑麻煩座享！當(dāng)然這還沒結(jié)束呢！下面更精彩似忧！
為屬性 value 和事件 input 命名
有些時(shí)候我們可能希望 value 就作為一個(gè)普通的屬性往下傳渣叛，而我們的業(yè)務(wù)場(chǎng)景里面 input 作為事件也不夠形象，反正就是 value 和 input 不符合你的業(yè)務(wù)中的語(yǔ)義盯捌，這個(gè)時(shí)候我想改名淳衙，咋辦？接下來(lái)看下面的代碼:
<template>
<div class="myInput">
<input type="text" :value="text" @input="inputHandle">
</div>
</template>
<script>
export default {
name: "MyInput",
model: {
prop: "text", // 該屬性名
event: "update:v-model" // 改事件名
}
props: {
text: String // 即便改名了饺著，這里也必不可少
},
methods: {
inputHandle (event) {
this.$emit("update:v-model", event.target.value)
}
}
}
</script>
上面就展示了我們?cè)趺锤锱剩鋵?shí)就是改變了 props 中的接受的字段名，然后新增了 model 選項(xiàng)幼衰，這里需要注意的是靴跛，不管怎么樣 props 中的字段都必不可少。
實(shí)際應(yīng)用：父子組件狀態(tài)同步
如標(biāo)題所說渡嚣，這個(gè) api 依然可以用作一些特殊情況下的父子組件狀態(tài)同步梢睛，這里舉一個(gè)實(shí)際的列子，假設(shè)我們使用某框架识椰，這個(gè)框架提供給我們模態(tài)框組件名叫 Modal 這個(gè)組件需要添加 v-model 屬性來(lái)顯示隱藏模態(tài)框绝葡，通常我們的模態(tài)框會(huì)有很多的邏輯，這個(gè)時(shí)候我們會(huì)考慮將其封裝成一個(gè)自定義的組件腹鹉，這個(gè)時(shí)候我們希望封裝過得組件和原來(lái)的模態(tài)框組件具備相同的使用方式都是加 v-model 來(lái)顯示隱藏藏畅，這是時(shí)候我們講到的功能是不是就特別合適了呢？
我自己建了一個(gè)web前端的交流裙有興趣的可以加入進(jìn)來(lái)交流哦：245650187（免費(fèi)）237871108（收費(fèi)）功咒。
個(gè)人微信： GD6570 個(gè)人球球：718879459 當(dāng)然你也可以嗶哩嗶哩搜索木瓜太香
