使用v-model完全接管子组件的数据(单文件)
父组件
<template>
<children v-model="formData"/>
</template>
<script setup>
import children from './children.vue'
const formData = reactive({object:{
name:'',
sex:''
}})
</script>
子组件
<template>
<input v-model="formData.name" placeholder="请输入姓名" @update:value="updateValue('name', $event)">
</input>
<input v-model="formData.sex" placeholder="请输入性别" @update:value="updateValue('sex', $event)">
</input>
<button @click="submit">
提交
</button>
</template>
<script setup>
// defineProps和 toRefs在全局进行引入
const props = defineProps({
formData: {
type: Object,
default: () => {
return {};
},
},
});
const emit = defineEmits(['update:model-value']);
//将reactive的值转为普通对象使用
const { formData } = toRefs(props);
//提交表单信息
const submit = ()=>{
}
//状态更新
const updateValue = (fieldName: string, value: any): void => {
emit('update:model-value', Object.assign(modelValue.value, {[fieldName]: value }));
};
</script>
此时,在父组件中的 f o r m D a t a 对象是实时变化的,可以随时拿出来用,无需封装对象过来取值 此时,在父组件中的formData对象是实时变化的,可以随时拿出来用,无需封装对象过来取值 此时,在父组件中的formData对象是实时变化的,可以随时拿出来用,无需封装对象过来取值