vue 踩坑之组件传值

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中

　　}

},