vue在子组件中修改数据父组件数据实时改变解决方法

bidepanm

已于 2022-07-13 15:33:12 修改

阅读量1k

点赞数

文章标签： vue.js

于 2022-07-13 10:37:43 首次发布

本文链接：https://blog.csdn.net/bidepanm/article/details/125758793

版权

https://blog.csdn.net/weixin_44585369/article/details/113641214

在子组件中对父组件中传过来的数据进行深拷贝即可。
子组件：

<el-form :model="formParams" :rules="rules" size="small" label-position="right" label-width="100px">
            <el-form-item label="名称:" prop='name'>
                <el-input
                    v-model="formParams.name"
                    placeholder="请输入"
                    maxlength="200">
                </el-input>
            </el-form-item>
            <el-form-item label="来源" prop="source">
                <el-select v-model="formParams.source" placeholder="">
                    <el-option
                        v-for="item in sourceList"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
</el-fom>


 props: {
        data: {
            type: Object,
            default: {}
        }
    },
data() {
		return {
			formParams: {}
		}
    },
 created() {
        this.formParams = JSON.parse(JSON.stringify(this.data.data));
    },

如果在子组件中无法修改值，看一下是否有在data中定义formParams！！！