为自定义组件添加v-model功能

v-model用于在组件中实现双向绑定的功能。v-model语法糖等价于一个value参数和一个input事件。所以在封装输入框，实现自定义v-model功能时，主要是实现这两个部分。

子组件部分：

<template>
  <div >
    <!--其余代码-->
      <input
             :value="currentValue"
             @input="vModel"
      />
  </div>
</template>

<script>
  export default {
   props: {
      /** 输入框内容 */
      value: {
        type: String
      },
    },

    data: function () {
      return {
        /** 输入框内容 */
        currentValue: this.value
      }
    },

    methods: {
      vModel(event){
        this.$emit("input",event.target.value)
      }
    },
  }
</script>

父组件部分

<template>
  <div>
    {{value}}
    <custom v-model="value"></custom >
  </div>
</template>

<script>
  export default {
    data: function () {
      return{
        value:'ss'
      }
    }
  }
</script>

至此，便可以在自定义组件中实现v-model双向绑定的功能。