主頁 >
企業開發 > vue父子組件狀態同步的最佳方式續章(v-model篇)
vue父子組件狀態同步的最佳方式續章(v-model篇)
2020-09-16 03:03:53 企業開發
大家好！我是木瓜太香！一名前端工程師，之前寫過一篇《vue父子組件狀態同步的最佳方式》，這篇文章描述了大多數情況下的父子組件同步的最佳方式，也是被開源中國官方推薦了，在這里表示感謝！
這次作為續章是對上一篇文章的特殊情況的補充，并會給出較詳細的描述與代碼演示，當然如果你單看這篇文章來解決特定問題也是可行的，
對于父子組件狀態同步，這篇文章 《vue父子組件狀態同步的最佳方式》 講述了大多數情況下的最優解，但是當我們希望自己創建的可復用組件和封裝的邏輯能夠盡量行為一致的時候情況可能會有所不同，舉個例子，我們現在要封裝一個輸入框組件叫做 MyInput 我們知道普通的輸入框通常會使用 v-model 來做雙向資料系結，這里如果想讓封裝的 MyInput 組件在使用上與普通的輸入框是一致的，我們就難免要讓自定義組件也支持 v-model 指令，這之中其實本質上也會涉及到父子組件的狀態同步問題，使用我們之前講的方式也能基本實作，只是借助 vue 暴露出來的 api 可以讓我們寫法更優雅，接下來我們使用不同的方式來實作這個組件，
原來的實作方式
自定義的MyInput組件
<template>
<div class="myInput">
<!-- 這里只能用 vModel 不可以使用橫杠寫法 -->
<input type="text" :value=https://www.cnblogs.com/o00o/p/"vModel" @input="inputHandle">
<script>
export default {
name: "MyInput",
props: {
// 這里也可以寫成'v-model': String 但是建議根據風格來，如果左邊都沒有引號就直接駝峰
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>
可以看到，原來的方式也能實作，但是就使用來說v-model被當成屬性，一定要在前面加上:才可以用動態屬性，結果就變成了:v-model，然后我們為了簡化寫法去掉事件系結，我們最終的效果就是 :v-model.sync這種寫法總會讓人覺得怪怪的，接下來我們就來解決這個問題
vue-api的方式實作
自定義的MyInput組件
<template>
<div class="myInput">
<input type="text" :value=https://www.cnblogs.com/o00o/p/"value" @input="inputHandle">
<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>
看到這里可能一部分同學會一臉懵逼，這就同步了？emm，其實還真同步了，那 value 從哪兒來的，input 事件也沒系結啊，的確這些都被我們省略掉了，其實這是 vue 的 api 帶給我們的便利，在我們試圖向自定義組件傳入 v-model 這個特殊的屬性的時候，vue 會幫我們做兩件事，一件是將 v-model 中的值作為 value 的值向下傳遞，這是我們在內部要寫 props value 的原因，另一件是在當前自定義組件上監聽 input 事件，并在觸發改事件的時候，將第一個引數賦值給 v-model 中的變數，你可以看到在我們肉眼不可見的地方 vue 為我們做了很多實際，但是大家要明白他為什么給你做這么多，仔細想想不難看出，這些邏輯是業務場景中重復次數很多的邏輯， vue 不給你做，你自己也要做，還會閑麻煩！當然這還沒結束呢！下面更精彩！
有些時候我們可能希望 value 就作為一個普通的屬性往下傳，而我們的業務場景里面 input 作為事件也不夠形象，反正就是 value 和 input 不符合你的業務中的語意，這個時候我想改名，咋辦？接下來看下面的代碼:
<template>
<div class="myInput">
<input type="text" :value=https://www.cnblogs.com/o00o/p/"text" @input="inputHandle">
<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>
上面就展示了我們怎么更名，其實就是改變了 props 中的接受的欄位名，然后新增了 model 選項，這里需要注意的是，不管怎么樣 props 中的欄位都必不可少，
如標題所說，這個 api 依然可以用作一些特殊情況下的父子組件狀態同步，這里舉一個實際的列子，假設我們使用某框架，這個框架提供給我們模態框組件名叫 Modal 這個組件需要添加 v-model 屬性來顯示隱藏模態框，通常我們的模態框會有很多的邏輯，這個時候我們會考慮將其封裝成一個自定義的組件，這個時候我們希望封裝過得組件和原來的模態框組件具備相同的使用方式都是加 v-model 來顯示隱藏，這是時候我們講到的功能是不是就特別合適了呢？
