Uniapp 子组件input v-model绑定数据

前置条件：

子组件中含有input标签

子组件的值是由父组件通过props传递

props中包含inputInfo参数，该参数的类型是object，默认值为{}。

无法使用v-model="inputInfo"，就是把inputInfo的类型改成String，默认值改为“”也无法实现。

解决方法：

如果inpuInfo的类型是object，可以使用v-model来绑定其特定的属性值如v-model="inputInfo.data"。

根据上述条件，我采用了“曲线救国”的方式，因为inputInfo的属性是动态载入的，所有我不能确定每一次该组件想要绑定的属性值是什么。我利用props专门设立了一个参数（objectName）用于告知子组件我这次要绑定的inputInfo的属性名称。子组件通过v-model="inputInfo[objectName]"即可实现数据的双向绑定。

父组件代码

<template>
    <view v-for="(item,index) in a">
         <customData  :objectName="item.paraName"  :inputInfo="inputInfo"></customData>
    </view>
</template>
<script setup>
let inputInfo=ref({});
let a = {  
    "paraName": ["kd", "xx"]  
}; 
a.paraName.forEach(paramName => {  
    // 使用数组中的每个元素作为属性名，给对象inputInfo添加属性  
    inputInfo.value[paramName] = null; // 这里将值设置为null，你可以根据需要设置为其他值  
});  
</script>

子组件代码

<template>
    <input  v-model="inputInfo[objectName]" ></input>
</template>
<script setup>
const props= defineProps({
	inputInfo:{
		type:Object,
		default:{}
	},
	// 曲线救国
	objectName:{
		type:String,
		default:''
	}
})
</script>

Uniapp 子组件input v-model绑定数据

悦读