在vue自定義元件中使用 v-model指令詳情

2022-06-07 14:00:23

一、前言

如何實現在自定義的vue元件中使用v-model，。起先覺得挺簡單，事實也挺簡單，但似乎又沒那麼簡單。因為深談這涉及指令原理、資料繫結實現原理。

1.技術點提前知

要想在自定義元件中使用v-model，使用上其實就簡單幾步，這裡以自定義input元件為例。

關鍵步驟：

1.props的使用。在自定義的vue檔案中，宣告父元件要向子元件傳遞的prop屬性，例如

 props: {
    // 接收string和number型別的值，
    myValue: [String, Number],
  },

注意：myValue這個屬性名稱是可以自定義的，但[String, Number]不能寫成字串["String","Number"],因為此時它們是構造器，是js的全域性api。

2.$emit的使用。用於向上派發事件，在自定義元件中觸發，例如：

methods: {
    changeInput ($event) {
      this.$emit('myInput', $event.target.value)
   },
}

向上派發myInput事件，這樣model監聽myInput才有意義：當輸入字元時觸發input事件，進而派發觸發自定義的myInput事件，然後model監聽myInput，就實現了資料繫結。必須注意，這裡的派發事件名“myInput”必須和model中的event的值相同。

PS: 通過watch監聽 input標籤的值，然後$emit派發事件，和通過@input派發事件具有一樣的效果。只要能達到通訊的效果即可，手段是多樣的。

3.關鍵的model。model是允許vue自定義元件使用v-model的關鍵，雖然有時我們不顯性的使用它，也不影響我們在自定義元件中使用v-model指令，這只是因為被設定預設值。而有的時候，顯示的使用，並自定義model的prop和event會有益。這是官閘道器於model的介紹：

允許一個自定義元件在使用 v-model 時客製化 prop 和 event。預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。

----本段摘自vue官網

自定義model使用範例：

model: {
    prop: 'myValue', // 預設是value
    event: 'myInput', // 預設是input
},

當我們使用model的預設值的時候value作prop，input作event時，可以省略不寫model。

4.v-model的使用。在父元件中使用自定義元件，例如

<custom-model v-model="myValue"></custom-model>

這樣寫效果也一樣：

<custom-model :my-value="myValue"></custom-model>

二、在自定義的vue元件中使用v-model

1.效果演示圖

2.自定義元件程式碼範例

<template>
  <!-- 自定義元件中使用v-mode指令 -->
  <input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {
  name: 'CustomModel',
  // 當我們使用model的預設值的時候value作prop，input作event時，可以省略不寫model。
  model: {
    prop: 'myValue', // 預設是value
    event: 'myInput', // 預設是input
  },
  props: {
    // 接收string和number型別的值，
    // 注意不能是寫成字串["String","Number"],因為此時它們是構造器，是全域性變數
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派發myInput事件，這樣model監聽myInput才有意義：當輸入字元時觸發input事件，
      // 進而派發觸發自定義的myInput事件，然後model監聽myInput，就實現了資料繫結
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

3.在父元件使用自定義元件

<template>
  <div class="home">
    <h3>輸入的實時內容：{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>

三、優寫時刻

本段是【每一個技術點都值得優寫】系列特寫段落。是一種拓展補充，就像數學試卷最後的附加題，讀者可以自由選擇閱讀。

v-model簡要補充。 v-model是vue中常用且重要的指令，能起到資料雙向繫結的作用。從MVVM(Model-View-ViewModel)架構的角度理解v-model的資料繫結，它在需要view層和model層實現互動互動的時，非常有用。例如，在view層輸入資料，會及時更新該資料到model層，而更新model層中的資料，也會被及時更新到view層，這種更新業務邏輯是ViewModel在起作用。

先來看下資料雙向繫結的效果：

那麼vue是如何實現資料繫結的？

①object型別資料實現資料可觀測，是通過Object的defineProperty()實現的。

②array型別資料實現資料可觀測，是通過攔截重寫資料的7個可運算元組且會改變陣列自身的方法實現的。

③依賴是一種表示資料和其使用者的關係，依賴管理器會為每一個依賴建立watcher範例。

④資料變化被觀測到後，會通過代表依賴的watcher範例，呼叫update()方法，通知檢視更新。

⑤vue提供了set和delete兩個全域性API，彌補部分新增和刪除資料手法，無法被觀測，進而影響資料響應式實現的不足。

到此這篇關於在vue自定義元件中使用 v-model指令詳情的文章就介紹到這了,更多相關 vue v-model指令內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！