Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa...
问题1:
父组件传值给A,B子组件,A组件接受到值后,需要修改父组件传过来的值,但不能改变B子组件的值,只在A组件中进行改变
解决方法:
props:["msg"] //这是A子组件接受父组件的值,这个值不能在子组件中修改,所以只能在data中定义一个属性来接受msg,再来修改
data(){
return{
childMsg:this.msg ; //把props的值赋给childMsg,子组件中就用childMsg
}
}
//子组件
<h1>{{childMsg}}</h1>
问题2
父组件传值给A,B子组件,经过上面A子组件修改后,B子组件也需要修改父组件,且同时改变A,B组件,这时你发现B子组件修改父组件后,A组件没有变化
解决方法:
在A子组件中添加watch方法
watch: {
msg(val) {
this.childMsg = val;//②监听外部对props属性msg的变更,并同步到组件内的data属性childMsg中
}
},