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>