一、前言

如何實(shí)現(xiàn)在自定義的vue組件中使用v-model，。 起先覺得挺簡單，事實(shí)也挺簡單，但似乎又沒那么簡單。因?yàn)樯钫勥@涉及指令原理、數(shù)據(jù)綁定實(shí)現(xiàn)原理。

1.技術(shù)點(diǎn)提前知

要想在自定義組件中使用v-model，使用上其實(shí)就簡單幾步，這里以自定義input組件為例。

關(guān)鍵步驟：

1.props的使用。在自定義的vue文件中，聲明父組件要向子組件傳遞的prop屬性，例如

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

注意：myValue這個(gè)屬性名稱是可以自定義的，但[String, Number]不能寫成字符串["String","Number"],因?yàn)榇藭r(shí)它們是構(gòu)造器，是js的全局api。

2.$emit的使用。用于向上派發(fā)事件，在自定義組件中觸發(fā)，例如：

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

向上派發(fā)myInput事件，這樣model監(jiān)聽myInput才有意義： 當(dāng)輸入字符時(shí)觸發(fā)input事件，進(jìn)而派發(fā)觸發(fā)自定義的myInput事件， 然后model監(jiān)聽myInput，就實(shí)現(xiàn)了數(shù)據(jù)綁定。必須注意，這里的派發(fā)事件名“myInput”必須和model中的event的值相同。

PS: 通過watch監(jiān)聽 input標(biāo)簽的值，然后$emit派發(fā)事件，和通過@input派發(fā)事件具有一樣的效果。只要能達(dá)到通信的效果即可，手段是多樣的。

3.關(guān)鍵的model。model是允許vue自定義組件使用v-model的關(guān)鍵，雖然有時(shí)我們不顯性的使用它，也不影響我們在自定義組件中使用v-model指令，這只是因?yàn)楸辉O(shè)置默認(rèn)值。而有的時(shí)候，顯示的使用，并自定義model的prop和event會(huì)有益。這是官網(wǎng)關(guān)于model的介紹：

允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

----本段摘自vue官網(wǎng)

自定義model使用示例：

model: {
    prop: 'myValue', // 默認(rèn)是value
    event: 'myInput', // 默認(rèn)是input
},

當(dāng)我們使用model的默認(rèn)值的時(shí)候value作prop，input作event時(shí)，可以省略不寫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',
  // 當(dāng)我們使用model的默認(rèn)值的時(shí)候value作prop，input作event時(shí)，可以省略不寫model。
  model: {
    prop: 'myValue', // 默認(rèn)是value
    event: 'myInput', // 默認(rèn)是input
  },
  props: {
    // 接收string和number類型的值，
    // 注意不能是寫成字符串["String","Number"],因?yàn)榇藭r(shí)它們是構(gòu)造器，是全局變量
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派發(fā)myInput事件，這樣model監(jiān)聽myInput才有意義：當(dāng)輸入字符時(shí)觸發(fā)input事件，
      // 進(jìn)而派發(fā)觸發(fā)自定義的myInput事件，然后model監(jiān)聽myInput，就實(shí)現(xiàn)了數(shù)據(jù)綁定
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

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

<template>
  <div class="home">
    <h3>輸入的實(shí)時(shí)內(nèi)容：{{ 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>

三、優(yōu)寫時(shí)刻

本段是【每一個(gè)技術(shù)點(diǎn)都值得優(yōu)寫】系列特寫段落。 是一種拓展補(bǔ)充，就像數(shù)學(xué)試卷最后的附加題，讀者可以自由選擇閱讀。

v-model簡要補(bǔ)充。 v-model是vue中常用且重要的指令，能起到數(shù)據(jù)雙向綁定的作用。 從MVVM(Model-View-ViewModel)架構(gòu)的角度理解v-model的數(shù)據(jù)綁定， 它在需要view層和model層實(shí)現(xiàn)交互互動(dòng)的時(shí)，非常有用。 例如，在view層輸入數(shù)據(jù)，會(huì)及時(shí)更新該數(shù)據(jù)到model層， 而更新model層中的數(shù)據(jù)，也會(huì)被及時(shí)更新到view層， 這種更新業(yè)務(wù)邏輯是ViewModel在起作用。

先來看下數(shù)據(jù)雙向綁定的效果：

那么vue是如何實(shí)現(xiàn)數(shù)據(jù)綁定的？

①object類型數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)可觀測，是通過Object的defineProperty()實(shí)現(xiàn)的。

②array類型數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)可觀測，是通過攔截重寫數(shù)據(jù)的7個(gè)可操作數(shù)組且會(huì)改變數(shù)組自身的方法實(shí)現(xiàn)的。

③依賴是一種表示數(shù)據(jù)和其使用者的關(guān)系，依賴管理器會(huì)為每一個(gè)依賴創(chuàng)建watcher實(shí)例。

④數(shù)據(jù)變化被觀測到后，會(huì)通過代表依賴的watcher實(shí)例，調(diào)用update()方法，通知視圖更新。

⑤vue提供了set和delete兩個(gè)全局API，彌補(bǔ)部分新增和刪除數(shù)據(jù)手法，無法被觀測，進(jìn)而影響數(shù)據(jù)響應(yīng)式實(shí)現(xiàn)的不足。

到此這篇關(guān)于在vue自定義組件中使用 v-model指令詳情的文章就介紹到這了,更多相關(guān) vue v-model指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論