vue 自定義組件使用v-model

<input v-model="something">是我們常用的雙向綁定方法，如果在自定義組件中如何使用v-model進行雙向綁定呢？

首先我們必須要清除v-model綁定的原理如下：
其實v-model的語法糖是這樣包裝而成的：

<input
  :value="something"
  @:input="something = $event.target.value">

而一個組件上使用時則會簡化成這樣子：

<custom-input
  :value="something"
  @input="value => { something = value }">
</custom-input>

因此，對於一個帶有 v-model 的組件（核心用法），它應該如下：

• 帶有v-model的父組件通過綁定的value值（即v-model的綁定值）傳給子組件，子組件通過 prop接收一個 value;
  
• 子組件利用 $emit 觸發 input 事件，並傳入新值value給父組件；

this.$emit('input', value);

廢話不多說了，直接上栗子；
HTML:

<div id="app">
  <my-component v-model="msg"></my-component>
  msg: {{msg}}
  <my-counter v-model="num"></my-counter>
  num: {{num}}
</div>

JS:

Vue.component('my-component', {
  template: `<div>
  <input type="text" :value="currentValue" @input="handleInput"/>
  </div>`,
  data: function () {
    return {
      currentValue: this.value //將prop屬性綁定到data屬性上，以便修改prop屬性（Vue不允許直接修改prop屬性的值）
    }
  },
  props: ['value'], //接收一個 value prop
  methods: {
    handleInput(event) {
      var value = event.target.value;
      this.$emit('input', value); //觸發 input 事件，並傳入新值
    }
  }
});
Vue.component("my-counter", {
  template: `<div>
  <h1>{{value}}</h1>
  <button @click="plus">+</button>
  <button @click="minu">-</button>
  </div>`,
  props: {
    value: Number //接收一個 value prop
  },
  data: function() {
    return {
      val: this.value 
    }
  },
  methods: {
    plus() {
      this.val = this.val + 1
      this.$emit('input', this.val) //觸發 input 事件，並傳入新值
    },
    minu() {
      if(this.val>0){
        this.val = this.val-1
        this.$emit('input', this.val) //觸發 input 事件，並傳入新值
      }
    }
  }
});
new Vue({
	el: '#app',
  data: {
  	msg: 'hello world',
    num: 0
  }
})

　　Demo截圖：

demo實例詳情

 

注意：

1.帶有v-model綁定的父組件下的子組件不一定是要input標簽的元素，其他元素都可以;　　

2.將prop屬性綁定到data屬性上，以便修改prop屬性（Vue不允許直接修改prop屬性的值）;

3.實現雙向綁定是watch監聽屬性是一個不做的方法（實時監視值的變化）；（詳細用法）