实现v-model功能组件实例
2018-09-12 本文已影响0人
清汤饺子
实现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
