組件中的v-model實例詳解

v-model的神奇

---

html

<div id="app">
 <input v-model="poin">
  {{ poin }}</div>

#js

new Vue({
  el:'#app',
  data:{poin:'zqz'
  }})

一旦我們輸入的值改變,data中的poin值也會改變。

理論上data中的值發生變化是會出發事件的，但我們沒看見？

其實在vue的文件中有說明:

<input v-model="something">

#是下面的語法糖

<input v-bind:value="something" v-on:input="something = $event.target.value">

每次我們都輸入的時候觸發了input事件，input綁定了內聯函數,從而改變了something的值。

你好奇input事件是什麼？

當 d5fd7aea971a85678ba271703566ebfd 或 4750256ae76b6b9d804861d8f69e79d3 元素的值變更時，DOM input 事件會同步觸發。 (對於type = checkbox 或type = radio 的輸入元素，當使用者單擊控制項時，輸入事件不會觸發，因為value屬性不會更改。) 此外，當內容更改時，它會在contenteditable 的編輯器上觸發。在這種情況下，事件目標是編輯主機元素。如果有兩個或多個具有 contenteditable 的元素為真，「編輯主機」是其父級不可編輯的最近的祖先元素。同樣，它也會在 designMode 編輯器的根元素上觸發。

具體見:MDN的input事件

#元件中的v-model

---

元件的v-model 生效原則

• 接受一個value 屬性

• 在有新的value 時觸發input 事件

我們先看一下程式碼

el-input.vue

d477f9ce7bf77f53fbcf36bec1b69b7a

    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeinput的封装94b3e26ee717c64999d7867364b1b4a3
      1813ca81a5bc6e5e4d9e4db5cb03ae09
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
  name: 'el-input',
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  methods: {
    // 每次都会加一
    updateValue (value) {
      this.$refs.input.value = value + 1;
    },
    selectAll(event) {
      setTimeout(function () {
        event.target.select()
      }, 0)
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927

將這個元件在Tom.vue中使用

c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      581b752f8958e789522d96089d885571da9236a413cd032428793817d58785c2
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

#每次使用的時候都會在後面加個1

但是問題來了，我們要如何在Tom.vue中取到這個值呢？

• 方法一：使用事件但感覺有點曲線救國

• 方法二：使用v-model

這裡就體現出了v-model的強大了，因為上面的語法糖，自動的綁定了input事件。所以我們可以利用這個特性去做一些事情。

給元件綁定v-model

將Tom.vue的程式碼修改一下

d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      42df839a2e7b33d0a8a98a26e44f5e5dda9236a413cd032428793817d58785c2
      eleValue的值:{{ this.eleValue }}
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  },
  data () {
    return {
      eleValue: 666 //设置一个默认值
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

初始狀態

輸入後的狀態

然後當我們輸入的值發生變化的時，我們預想的eleValue依舊沒有發生變化,而el-input.vue中的value確發生了變化

也是是說value發生變化後沒有傳遞(同步)到父元件中,這也就是vue1中的.sync的用處，而在vue2中已經廢棄了。

修改el-input.vue程式碼，增加this.$emit('input', 值*1)

...updateValue (value) {  this.$refs.input.value = value + 1;  // 触发组件上绑定的input事件,以实现value同步  this.$emit('input', value*1)},...

這下就實現了值的同步問題。

以上是組件中的v-model實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！