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

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”

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

• vue2: Prop — Vue.js (vuejs.org) 单向数据流
• vue3: Props | Vue.js (vuejs.org) 单向数据流

  假定在组件中,使用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
		}
    }

比如，在项目开发中使用elementUI等第三方UI组件库。在使用**v-model = “modelVal”**时，应该使用上述方法（可以灵活在vue组件的生命周期中，处理props属性，没必要完全安装上述的代码）处理数据，不要破坏单向数据流。

总结

• 推荐使用方法一和方法三
• 如果不需要modelVal可以跟着propsVal改变，只是取最开始的propsVal，使用方法一
• 如果需要modelVal可以跟着propsVal改变，使用方法三