Vue (three) - parent-child component communication

Reason  : Vue's component scope is isolated, and it is not allowed to directly refer to the parent component's data in the child component's template. A specific method must be used to enable data transfer between components.

 

props parent component to pass data to child component

props: The role is to pass data from the parent component to the child component.

Grammar: Refer to "Vue (2) - Parent-Child Component Grammar".

Points to note:

1: The child component needs to explicitly declare what data it needs. grammar:

props{

item:{

default(){

return 

}

}
}

2: The data passed in from the parent component using props should generally not be changed, because after the change, the data in the parent component has also changed, but (knocking on the blackboard), it seems that the new version of vue has modified this. No verification, please modify with caution.

3: When the parent component uses the child component, it uses v-bind to bind data (below). Bind the items of the child component to the item data of the parent component.

$emit child component to pass data to parent component reference documentation https://cn.vuejs.org/v2/api/#vm-emit

grammar:

Writing in subcomponents:

html: use click to call the submit method.

js: In the submit method, use $emit to talk about this.items data and pass it to the transferSubmit method, which is a custom method.

Writing in the parent component:

html: Use the transferSubmit method to call the getItems method.

js: The parameters in getItems are passed in from the child component.

 

Subcomponents pass data to subcomponents

Vue doesn't have a way to directly pass data from pair to child. You can refer to Vuex provided by vue.

 

Reference article: http://www.cnblogs.com/wisewrong/p/6266038.html Author: WiseWrong