v-model组件化编程应用

使用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>

$$此时，在父组件中的formData对象是实时变化的，可以随时拿出来用，无需封装对象过来取值$$