1. Communication between components
1. Communication between grandfather and grandson.
Recently I made a request similar to the circle of friends. The comment page made below (dynamic details at the top, comment list at the bottom, and an edit box for likes + comments fixed at the bottom). As shown in the figure:
Omg, the picture is too big.
The grandpa component needs to pass the like information to the grandson, grandpa→dad→grandson. The grandson also wants to change this like message. Vue parent-child component communication needs to pass through prop, but, child component cannot change this prop,
a. Emit through layer by layer? This is not good, it is too troublesome
b.prop is assigned to a new property, however, the value of this prop was passed by grandpa with a default value for the first time. After grandpa requested the interface, he passed it again. The consequence is that although the prop is always the latest, the grandson takes It's always the first one that arrives. can't be done.
c. A relatively powerful front-end big brother told me: I will directly put this information into an object and pass it to you, so that you can modify it at will, just like const a constant, modifying this constant will report an error, but const is For an object, modifying the properties under the object will not report an error, and so on. Does the parent component pass an object, and the subcomponent modifies its properties without any problem? I tried it, and it really works, hahaha.