vue.js自定義組件上使用v-model

       可以在自定義組件上使用v-model實現雙向綁定。在使用新功能之前，我們先來了解一下vue.js的v-model是如何實現雙向綁定的。從官方文檔以及各種技術文章中,我們可以知道，v-model是v-bind以及v-on配合使用的語法糖，給一個詳細的例子:

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

兩種方法的實現效果是一樣的，都是給<input>標簽綁定一個值，並且在監聽到input事件時，把輸入的值替換綁定的值來實現雙向綁定。其中第一種是第二種方法的語法糖。

現在我們已經了解了v-model是什么東東，那么除了在表單控件上使用v-model外，能不能在自定義的組件上使用v-model，從而實現父子組件間的雙向綁定呢？

答案是可以的。 vue2.2+版本后，新增加了一個model選項，model選項允許自定義prop和event。官方原文是這樣的：允許一個自定義組件在使用 v-model 時定制 prop 和 event。默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以回避這些情況產生的沖突。

下面我們通過一個實例來講解怎么使用：

我們首先編寫一個子組件，並用到model選項,核心代碼如下

方法一：

父組件：

<template>
<div >
  <p>總數{{total}}</p>
  <button @click="addNumber">+1</button>
  <about-chil v-model="total"/>// 相當於 <about-chil :value="tatal"  @input="tatal=$event"/>
</div>
</template>
<script>
import AboutChil from './AboutChil.vue';
export default {
  data() {
    return {
      total: 8
    };
  },
  components: {
    AboutChil
  },
  methods:{
      addNumber(){
          this.total++
      }
  }

}

</script>

子組件：

<template>

<div>
  <p>我是兒子，父親對我說： {{value}}</p>

    <input :value="total" @input="$emit('returnBack', $event.target.value)">//在一個input框中輸入內容父子組件中的值也會改變

  <a href="javascript:;"  @click="returnBackFn">回應</a>
</div>
</template>
<script>

export default {

  props:['value'],//如果以這樣的格式去寫的話還想頁面展示出來，必須是value

  methods: {

    returnBackFn() {

      this.$emit('input', 3);//此方法必須是input

    }

  }

}

</script>

 

　　方法二：子組件代碼<template>

<div>
  <p>我是兒子，父親對我說： {{total}}</p>
 <input :value="total" @input="$emit('returnBack', $event.target.value)">//在一個input框中輸入內容父子組件中的值也會改變

  <a href="javascript:;" @click="returnBackFn">回應</a>

</div>
</template>
<script> export default { props:['total'], model: { prop: 'total',//值可以隨意命名 event: 'returnBack'//方法也可以隨意命名 }, methods: { returnBackFn() { this.$emit('returnBack', '3'); } } } </script>