为什么组件间v-model传不过去值

53 阅读1分钟

微信图片_20230227103020.png 找了一个多小时原因为什么组件间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)
   	 }