【vue】---- v-model在自定義組件中的使用

1. v-model簡介

　可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定，它的本質是一個語法糖，在單向數據綁定的基礎上，增加了監聽用戶輸入事件並更新數據的功能。

 

2. v-model的實現原理

　動態綁定了 input 的 value 指向了 messgae 變量，並且在觸發 input 事件的時候去動態把 message 設置為目標值，這樣就完成了雙向數據綁定。

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

 

3. v-model在自定義組件中的使用

　定義了一個 value 的 prop，並且在 input 事件的回調函數中，通過 this.$emit('input', value) 派發了一個事件，從而使 v-model 生效。

Vue.component('example', {
  template: `<div>
 　　 <input type="text" :value="val" @input="handleVal"/>
  </div>`,
  data: function () {
    return {
      val: this.value //將prop屬性綁定到data屬性上，以便修改prop屬性（Vue不允許直接修改prop屬性的值）
    }
  },
  props: ['value'], //接收一個 value prop
  methods: {
    handleVal($event) {
      var value = $event.target.value;
      this.$emit('input', value); //觸發 input 事件，並傳入新值
    }
  }
});