你真的知道組件中的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: '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)
    }
  }
}

</script>
<style>
</style>

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

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

</template>
<script>
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  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 './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  },
  data () {
    return {
      eleValue: 666 //設置一個默認值
    }
  }
}

</script>

初始狀態

輸入後的狀態

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

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

修改el-input.vue代碼，增長this.$emit('input', value*1)

...
updateValue (value) {
      this.$refs.input.value = value + 1;
      // 觸發組件上綁定的input事件,以實現value同步
      this.$emit('input', value*1)
    },
...

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