在子组件中，v-model props属性时，报错了怎么解决

ARuanLY

已于 2024-06-24 17:06:46 修改

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端 elementui

于 2023-03-21 16:01:09 首次发布

本文链接：https://blog.csdn.net/weixin_65908792/article/details/129690581

版权

在Vue组件中使用v-model直接修改props值会触发警告，因为这违反了单向数据流原则。文章提出了三种解决方案：通过data或computed创建局部副本，使用watch监听props变化并更新局部状态，或者在封装UI组件时正确处理v-model。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

del props属性时，报错了怎么解决

v-model="propsVal"时,报错:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “propsVal”

之所以会警告，是因为破坏了单向数据流（注意：破坏单向数据流，会使项目代码变为屎山代码），建议看看官方文档：

假定在组件中,使用v-model = “modelVal”，根据官方提示信息和官方文档，可以有方法一和方法二，方法三是利用data和watch：

方法一：利用data

  // 缺点：当propsVal改变时，modelVal并不会随propsVal的改变而改变
    props: ["propsVal"],
    data(){
		return {
			modelVal : this.propsVal
		}
    }

方法二：利用计算属性

  // 缺点：同方法一
    props: ["propsVal"],
    computed: {
        modelVal: {
            get: function () {
                return this.propsVal
            },
            set: function (val) {  // 要提供setter, 不然报错
                console.log(val)
                // 进行set操作
                // ...
            }
        }
        // 只读时，不是使用v-model = "modelVal"时
        // modelVal: {
        //     function () {
        //         return this.propsVal
        //     }
        //  }

    }

方法三：利用data和watch

  // 对方法一的改进，modelVal可以跟着propsVal改变
    props: ["propsVal"],
    watch: {
        propsVal:function(newVal,oldVal){
            console.log(val,oldVal)
            this.modelVal = val //监听propsVal值，改变data里的modelVal
        }
    }
    data(){
		return {
			modelVal : this.propsVal
		}
    }