找了一个多小时原因为什么组件间v-model传不过去值
-----
emit('update:modelValue', targetValue)中多了个空格。。。
查找原因的过程中明确了vue3中使用v-model进行父子组件间传值:
1. 在父组件中调用子组件
<validate-input v-model="emailVal"></validate-input>\
const eamilVal = ref('adsb')
2. 子组件标签中绑定事件
<input type="text" :value="inputRef.val" @input="updateValue">
3. 使用props定义modelValue接收
props:{
modelValue: String
},
setup(props, {emit}) {
const inputRef = reactive({
val: props.modelValue||'',
})
}
4.使用context的emit发送值给父组件 emit('update:modelValue', targetValue)
// 数据更新
const updateValue = (e:Event)=>{
const targetValue = (e.target as HTMLInputElement).value
inputRef.val = targetValue
emit('update:modelValue', targetValue)
}