vue父子組件狀態(tài)同步的最佳方式續(xù)章(v-model篇)

頭號碼甲 2021-09-19

展開全文

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

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

對于父子組件狀態(tài)同步，這篇文章《vue父子組件狀態(tài)同步的最佳方式》講述了大多數(shù)情況下的最優(yōu)解，但是當我們希望自己創(chuàng)建的可復(fù)用組件和封裝的邏輯能夠盡量行為一致的時候情況可能會有所不同，舉個例子，我們現(xiàn)在要封裝一個輸入框組件叫做 MyInput 我們知道普通的輸入框通常會使用 v-model 來做雙向數(shù)據(jù)綁定，這里如果想讓封裝的 MyInput 組件在使用上與普通的輸入框是一致的，我們就難免要讓自定義組件也支持 v-model 指令，這之中其實本質(zhì)上也會涉及到父子組件的狀態(tài)同步問題，使用我們之前講的方式也能基本實現(xiàn)，只是借助 vue 暴露出來的 api 可以讓我們寫法更優(yōu)雅，接下來我們使用不同的方式來實現(xiàn)這個組件。

原來的實現(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)格來，如果左邊都沒有引號就直接駝峰
    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>

可以看到，原來的方式也能實現(xiàn)，但是就使用來說v-model被當成屬性，一定要在前面加上:才可以用動態(tài)屬性，結(jié)果就變成了:v-model，然后我們?yōu)榱撕喕瘜懛ㄈサ羰录壎?，我們最終的效果就是 :v-model.sync這種寫法總會讓人覺得怪怪的，接下來我們就來解決這個問題

vue-api的方式實現(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é)會一臉懵逼，這就同步了？emm，其實還真同步了，那 value 從哪兒來的，input 事件也沒綁定啊，的確這些都被我們省略掉了，其實這是 vue 的 api 帶給我們的便利，在我們試圖向自定義組件傳入 v-model 這個特殊的屬性的時候，vue 會幫我們做兩件事，一件是將 v-model 中的值作為 value 的值向下傳遞，這是我們在內(nèi)部要寫 props value 的原因，另一件是在當前自定義組件上監(jiān)聽 input 事件，并在觸發(fā)改事件的時候，將第一個參數(shù)賦值給 v-model 中的變量。你可以看到在我們?nèi)庋鄄豢梢姷牡胤?vue 為我們做了很多實際，但是大家要明白他為什么給你做這么多，仔細想想不難看出，這些邏輯是業(yè)務(wù)場景中重復(fù)次數(shù)很多的邏輯， vue 不給你做，你自己也要做，還會閑麻煩！當然這還沒結(jié)束呢！下面更精彩！

為屬性 `value` 和事件 `input` 命名

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

<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 中的字段都必不可少。

實際應(yīng)用：父子組件狀態(tài)同步

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