vue组件获取props中的数据并绑定到form表单 el-form-item的v-model中方法

在vue的组件的form表单中, 我们可以直接使用props中传递的数据,如: <el-form-item label="姓名:">{{ value.real_name }} </el-form-item> 这里的value是通过props传递来的 const props = defineProps({value: {type: [Object, String],required: true} }) , 但是如果我们想要将props传递来的数据直接绑定到 表单的 formData.xxx 中, 这就需要借助 vue的生命周期函数onBeforeUpdate来将prpos的数据和formData中的数据进行绑定了.

这时如果在定义时直接使用 props中的值,如 const formData = reactive({status: props.value.status }) 这样是行不通的,因为这个props数据的传递时间是在组件被创建之后,在使用的时候才有的.

props数据绑定到form表单v-model示例代码

正确的做法是在数据更新之前我们在将props的数据和formData进行绑定, 示例代码如下:

<template>
 <el-form ref="formRef" :model="formData" >
    <el-form-item label="名称:">{{ value.name }} </el-form-item>
    <el-form-item label="状态" required prop="status">
        <el-radio-group v-model="formData.status">
            <el-radio
                v-for="(item, idx) in user_status"
                :key="idx"
                :value="parseInt(item.value)"
                >{{ item.name }}</el-radio>
        </el-radio-group>
    </el-form-item>
</el-form>

</template>

<script lang="ts" setup>

// 引入生命周期函数
import { onBeforeUpdate } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        required: true
    },
    value: {
        type: [Object, String],
        required: true
    }
})

const formData = reactive({
    status: 0
})

// 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUpdate(() => {
    if (props.value?.status !== undefined) {
        // 绑定props数据到formData
        formData.status = props.value?.status
    }
})


</script>

总结：vue中的props传递来的数据在form表单里面是可以直接显示的，但是如果需要绑定到formData表单数据中的话就需要借助vue的生命周期函数onBeforeUpdate在数据更新之前将props中的数据和formData进行绑定。