Vue中如何通过v-model进行插件的封装

父组件：

<template>
  <div>
    <v-input v-model="value"></v-input>
  </div>
</template>


<script>
import vInput from './input.vue';
export default {
    data(){
        return {
            value:null,
        }
    },
    components:{
        vInput,
    }
}
</script>

子组件：

<template>
  <div class="input-box">
    <input
      class="ipt"
      :disabled="disabled || false"
      v-if="Maxlength"
      type="text"
      v-model="valueIpt"
      :maxlength="Maxlength"
    />
    <input
      class="ipt"
      v-model="valueIpt"
      :disabled="disabled || false"
      v-else
      type="text"
    />
  </div>
</template>

<script>
export default {
  name: "vmodel",
  model: [
    {
      prop: "name",
      event: "input"
    }
  ],
  props: ["Maxlength", "disabled", "value"],
  computed: {
    valueIpt: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  }
};
</script>

<style scoped>
.input-box {
  display: flex;
}
.ipt {
  width: 100%;
  height: 100%;
  border: none;
  text-align: center;
  padding: 0;
  vertical-align: bottom;
  /* border-bottom: 1px solid #000000; */
}
</style>

 这样子就实现了通过v-model进行组件的封装；