v-model 其实是一个语法糖,通过props和emit组合而成的。
v-model vue2和vue3对比 改变
1)prop: value->modelValue;
2) 事件:input->update:modelValue;
3) v-bind 的 .sync修饰符和组件的modal选项已移除(vue3废除)
4)支持多个v-model(vue3新增)
5) 支持自定义 修饰符Modifiers(vue3新增)
1 app.vue 父组件
import {ref } from 'vue'
import vModelVue from './components/v-model.vue'
const isShow = ref
const text = ref
html,body,#app{
height: 100%;
overflow: hidden;
}
2 v-mode.vue 子组件
import{ref,reactive} from 'vue'
//接受自定义组件参数(如:vModelVue组件中的参数)
//modelValue:默认接受值吗??? 目前接受的事vModelVue中的isShow
defineProps<{
modelValue:boolean,
textVal:string,
}>()
// const props = defineProps<{
// modelValue:boolean,
// textVal:string,
// //textValModifiers(Modifiers自定义修饰符固定写法)
// textValModifiers?:{
// isBt:boolean
// }
// }>()
//子组件改变父组件内容
const emit = defineEmits(['update:modelValue','update:textVal'])
const close = ()=>{
emit('update:modelValue',false)
}
/*********以上为基本v-model用法***********/
const change =(e:Event)=>{
const target = e.target as HTMLInputElement;
emit('update:textVal',target.value)
}
// const change =(e:Event)=>{
// const target = e.target as HTMLInputElement;
// emit('update:textVal',props?.textValModifiers?.isBt?target.value+'123':target.value)
// }
.model{
width: 500px;
border: 5px solid #ccc;
padding: 10px;
}