自定义v-model用法

在vue中，v-model是用来进行数据双向绑定的一个语法糖，比如说用在input上，输入框数据变化，v-model绑定的对应的值也会跟着变化，无需单独获取。

其实v-model还可以在自定义组件中使用，可以被拆解为props:value和event：input，也就是说组件必须接收一个value值以及名为input的自定义事件，就可以在自定义组件上使用v-model了。

新建一个组件Input.vue

<template>
    <div class="input">
        <button @click="changeNum(-1)">-</button>
        <span>{
  {currentVal}}</span>
        <button @click="changeNum(1)">+</button>
    </div>
</template>

<script>
export default {
    props: {
      value: {
        type: Number,
        default: 0

    }},
    data() {
        return {
           currentVal: this.value
        };
    },
    watch: {
      value(val) {
        this.currentVal = val;
      }
    },

    methods: {
      changeNum(val) {
        this.currentVal += val;
        th