v-model 具体实现

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套个壳子，同时增加了一些功能！（后续校验的功能）