Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa...
Question 1:
A parent component to the traditional values, B sub-assembly, the A component receives value, modify the values pass over the parent component, but can not change the value of the B sub-assemblies, only changes in component A
Solution:
props: [ "msg"] // This is the value of the receiving parent component subassembly A, the value can not be modified in subassembly, so the data can only be defined in a property to receive msg, again modified
data(){
return{
childMsg: this.msg; // assign the value props childMsg, subassembly to use childMsg
}
}
//Subassembly
<h1>{{childMsg}}</h1>
Question 2
A parent component to the traditional values, B sub-assembly A sub-assembly after the above modifications, subassembly B need to be modified parent component, and simultaneously changing the A, component B, then you found subassembly modify the parent component B, component A no change
Solution:
A method of adding watch subassembly
watch: {
msg(val) {
this.childMsg = val; // ② external monitor changes the attribute msg props and synchronized to the data within the assembly property childMsg
}
},