preface
Vue can be divided into three component transmission modes: parent to child, child to parent, and non-parent component transmission
The first type of parent component passes values to its children
1. Basic concepts
- In VUE, the parent-child component relationship can be summarized as
propPassing down,The eventPass it up. The parent component passespropDelivers data to subcomponents, and the subcomponents passThe eventSends information to the parent component
2. Give examples
- The create child component page is introduced on the parent component (note: importing child components must be registered), introducing the name of its own newly assembled volume
Chil(tag), passChil(tag) passes a value to a child component. If you want to dynamically pass a value, it must be dynamically bound before the property name otherwise it will pass a string.
- In a child component
propsIt accepts the value from the parent component and there are two ways to write it the first way[' Name you receive ']The second one is the one in the picture, there’s one in heredefaultThere are many methods: strings, arrays, objects, and so on.
The second child component passes values to its parent
- Used when a child component passes a value to its parent
$emitProperty, the first value is the name to be passed to the parent, and the two values are the data they want to pass to the parent, as shown in the figure.
- In the parent component
ChilOn the label@Symbol plus the name you just defined in the child componentchangeFatchReceive the value, followed by a method, in the diagramvalIt is possible to retrieve the data passed from the child componentdataTo accept, as shown in the following figure.
