vue自定义组件v-modal（包含vue2,vue3)

vue2写法

子组件

<template>
    <div class="my-input">
        <input type="text" @input="changeVal" :value="value">
    </div>
</template>
 
<script>
export default {
    name: 'MyInput',
    props:['value'],
    methods: {
        changeVal(event) {
            this.$emit("input", event.target.value)
        }
    }
};
</script>
<style scoped lang="less">
input {
    border: 1px solid #999;
    padding: 2px 10px;
}
</style>

vue3写法 

<template>
    <div class="my-input">
        <input type="text" @input="changeVal" :value="modelValue">
    </div>
</template>

<script lang="ts" setup>
    const props = defineProps({
        modelValue: {type: [Number, String]}
    })
    const emit = defineEmits(['update:modelValue'])

    const changeVal=(event)=>{
        emit('update:modelValue', event.target.value)
    }
</script>


<style scoped lang="less">
input {
    border: 1px solid #999;
    padding: 2px 10px;
}
</style>

使用：

 <my-input v-model='inputValue'></my-input>