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>