v-model
等于 :value = "value"
@input = "handleInput"
<template>
<div class="app">
<input type="text" :value = "value" @input="handleInput"
v-bind="$attrs">
</div>
</template>
<script lang="ts">
import Vue from 'vue'
// KInput 要用v-model 所以说必须有俩逻辑
// 1, value 的回显,数据绑定,数据变化的时候,也跟着回显!
// 2 监听 input 事件, 数据也跟着发生变化
export default {
props:{
value:{
type:String,
default:""
}
},
methods:{
handleInput(ev){
let value = ev.target.value;
// 这边必须要暴露出去, 要不然使用者接受不到input 事件!
this.$emit("input",value)
// 这里有一些额外的操作//****
}
}
}
</script>
<style scoped>
.app{
background-color: pink;
width:400px;
height: 500px;
}
</style>
这个逻辑一定要搞清楚!
KInput 组件,
中
this.$emit("input",value)
为啥要这句话,因为外部也要监听 input 事件,说白了,就是给input套个壳子,同时增加了一些功能!(后续校验的功能)