Vue中v-model实际上是一个语法糖
<input v-model="val">
//等同于
//原生中
<input :value="val" @input="val=$event.target.value">
<input type="checkbox" :checked="val" @change="val=$event.target.checked">
//Vue2中
<template>
<input type="text" :value="value" @input="updateInput">
</template>
<script>
export default{
props:{
value:String
},
methods: {
updateInput(e){
this.$emit("input",e.target.value);
}
}
}
</script>
<template>
<input type="checkbox" :checked="checked" @change="updateInput">
</template>
<script>
export default{
props:{
checked:Boolean
},
model:{
prop:"checked",
event:"change"
},
methods: {
updateInput(e){
this.$emit("change",e.target.checked);
}
}
}
</script>
//Vue3中
<template>
<div>
<input type="text" :value="val" @input="updateValue">
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
modelValue: String
},
setup(props, context) {
const val = ref(props.modelValue || '');
const updateValue = (e: KeyboardEvent) => {
const targetValue = (e.target as HTMLInputElement).value;
val = targetValue;
context.emit('update:modelValue', targetValue);
};
return {
val
updateValue
};
}
});
</script>
