組件中的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事件是什麼？

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

具體見:MDN的input事件

#元件中的v-model

---

元件的v-model 生效原則

• 接受一個value 屬性

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

我們先看一下程式碼

el-input.vue

<template>

    <div>
      <p>input的封装</p>
      <input type="text"
             ref="input"
             :value="value"
             @input="updateValue($event.target.value)"
             @focus="selectAll"
             >
    </div>

</template>
<script>

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

</script>
<style>
</style>

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

<style>
</style>
<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input></v-el-input>
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

export default {
  name: &#39;tom&#39;,
  components: {
    vElInput
  }
}

</script>

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

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

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

• 方法二：使用v-model

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

給元件綁定v-model

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

<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input v-model="eleValue"></v-el-input>
      eleValue的值:{{ this.eleValue }}
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

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

</script>

初始狀態

輸入後的狀態

然後當我們輸入的值發生變化的時，我們預想的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中文網其他相關文章！