实现v-model功能组件实例

实现v-model功能组件实例

vModel.vue:
<template>
<input type="text" :value="value" @input="change($event)"/>
</template>

<script>
    export default {
        name: "vModel",
      props:["value"],
      methods:{
          change(event) {
            if(event.inputType === "insertText"){
              this.$emit("input",this.value + event.data);
            }else{
              this.$emit("input",this.value.substring(0,this.value.length-1));
            }

          }
      }
    }
</script>

app.vue:

image

如图:

image

实现v-model功能组件官网上更简单的写法
vModel.vue

<template>
<input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
</template>

<script>
    export default {
      name: "vModel",
      props:["value"],
      methods:{
        
      }
    }
</script>

app.vue

image

效果如图:

image