vue父子元件狀態同步的最佳方式續章(v-model篇)

木瓜太香發表於2020-09-15
Vue元件

大家好！我是木瓜太香！一名前端工程師，之前寫過一篇《vue父子元件狀態同步的最佳方式》，這篇文章描述了大多數情況下的父子元件同步的最佳方式，也是被開源中國官方推薦了，在這裡表示感謝！

這次作為續章是對上一篇文章的特殊情況的補充，並會給出較詳細的描述與程式碼演示，當然如果你單看這篇文章來解決特定問題也是可行的。

對於父子元件狀態同步，這篇文章 《vue父子元件狀態同步的最佳方式》 講述了大多數情況下的最優解，但是當我們希望自己建立的可複用元件和封裝的邏輯能夠儘量行為一致的時候情況可能會有所不同，舉個例子，我們現在要封裝一個輸入框元件叫做 MyInput 我們知道普通的輸入框通常會使用 v-model 來做雙向資料繫結，這裡如果想讓封裝的 MyInput 元件在使用上與普通的輸入框是一致的，我們就難免要讓自定義元件也支援 v-model 指令，這之中其實本質上也會涉及到父子元件的狀態同步問題，使用我們之前講的方式也能基本實現，只是藉助 vue 暴露出來的 api 可以讓我們寫法更優雅，接下來我們使用不同的方式來實現這個元件。

原來的實現方式

自定義的MyInput元件

<template>
  <div class="myInput">
      <!-- 這裡只能用 vModel 不可以使用橫槓寫法 -->
    <input type="text" :value="vModel" @input="inputHandle">
  </div>
</template>

<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="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>

看到這裡可能一部分同學會一臉懵逼，這就同步了？emm，其實還真同步了，那 value 從哪兒來的，input 事件也沒繫結啊，的確這些都被我們省略掉了，其實這是 vue 的 api 帶給我們的便利，在我們試圖向自定義元件傳入 v-model 這個特殊的屬性的時候，vue 會幫我們做兩件事，一件是將 v-model 中的值作為 value 的值向下傳遞，這是我們在內部要寫 props value 的原因，另一件是在當前自定義元件上監聽 input 事件，並在觸發改事件的時候，將第一個引數賦值給 v-model 中的變數。你可以看到在我們肉眼不可見的地方 vue 為我們做了很多實際，但是大家要明白他為什麼給你做這麼多，仔細想想不難看出，這些邏輯是業務場景中重複次數很多的邏輯， vue 不給你做，你自己也要做，還會閒麻煩！當然這還沒結束呢！下面更精彩！

為屬性 value 和事件 input 命名

有些時候我們可能希望 value 就作為一個普通的屬性往下傳，而我們的業務場景裡面 input 作為事件也不夠形象，反正就是 value 和 input 不符合你的業務中的語義，這個時候我想改名，咋辦？接下來看下面的程式碼:

<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>

上面就展示了我們怎麼更名，其實就是改變了 props 中的接受的欄位名，然後新增了 model 選項，這裡需要注意的是，不管怎麼樣 props 中的欄位都必不可少。

實際應用：父子元件狀態同步

如標題所說，這個 api 依然可以用作一些特殊情況下的父子元件狀態同步，這裡舉一個實際的列子，假設我們使用某框架，這個框架提供給我們模態框元件名叫 Modal 這個元件需要新增 v-model 屬性來顯示隱藏模態框，通常我們的模態框會有很多的邏輯，這個時候我們會考慮將其封裝成一個自定義的元件，這個時候我們希望封裝過得元件和原來的模態框元件具備相同的使用方式都是加 v-model 來顯示隱藏，這是時候我們講到的功能是不是就特別合適了呢？

有前端問題需要討論的可以加我的qun:237871108。也可以通過嗶哩嗶哩搜尋木瓜太香找到我。

相關文章