Vue中父组件通过v-model向子组件传对象参数

描述： Vue中父组件通过v-model向子组件传递一个对象，在子组件实现一个能够对object key-value进行编辑的组件封装。

在这里插入图片描述

父组件文件

 <form-child v-model="configMap"></form-child>import formChild from '@/components/formchild.vue'
import { defineComponent, ref} from 'vue'export default defineComponent({name: 'form',components: {formChild},setup() {const configMap = ref({name: 'summer',age: '18'       })return {configMap,}}
})

子组件 formchild.vue

<template><div><div v-for="(item, index) in configEntries" :key="index" class="row"><a-row class="item"><a-col :span="8"><a-input type="text" v-model:value="item.key" @change="updateConfigMap"></a-input></a-col><a-col :span="8" :offset="1"><a-input type="text" v-model:value="item.value" @change="updateConfigMap"></a-input></a-col><a-col :offset="1"><close-circle-outlined @click="() => deleteByIndex(index)" :style="{fontSize: '16px', color: '#08c', marginTop: '7px'}"/></a-col></a-row> </div><a-button type="primary" @click="addConfig">add</a-button></div>
</template>

import { defineComponent, toRef } from "vue";
import { CloseCircleOutlined } from '@ant-design/icons-vue';export default defineComponent({name: 'formchild',components: {CloseCircleOutlined},props: {modelValue: Object},emits: ['update:modelValue'],setup(props, { emit }) {// 第一步 将父组件传递过来的对象转变为一个数组const configData = toRef({...props.modelValue});const configEntries = objToArray(configData.value);// 第二步 对每一个key、value可以编辑进行处理const updateConfigMap = () => {configData.value = arrayToObj(configEntries)emit('update:modelValue', configData.value)}// 第三步 添加/删除事件的处理const addConfig = () => {  configEntries.push({key: '',value: ''})updateConfigMap()}const deleteByIndex = (index)=> {configEntries.splice(index, 1)updateConfigMap()}const arrayToObj = (arr: any[]) => {return arr.reduce((obj, item) => {obj[item.key] = item.value;return obj;}, {})}const objToArray = (arr: any) => {return Object.entries(arr).map(([key, value]) =>({key,value}))}return {configEntries,addConfig,updateConfigMap,deleteByIndex,}}
})