Analysis of the life cycle of parent-child components and the problem of transferring data by child components

1. The life cycle of parent-child components

1. Ordinary parent-child components:

Parent beforeCreate->Father created->Father beforeMount->Son beforeCreate->Son created->Son beforeMount->Son mounted->Parent mounted

2. Parent component Y, parent component F, child component Z

The parent component is component(:is="") written,

Subcomponents are written on demand

switch(){
    case :
        return ()=> import("./")
    default:
        return ()=>import("./")
}

life cycle:

Mr. BeforeCreate-My father created->My father beforeCreate->Father created->Father beforeMount->Father mounted->My father mounted->Son beforeCreate->Son created->Son beforeMount->Son mounted

2. Analysis of the data problem of father-passing son-borne props

1. Asynchronous data problem. The created and mounted subcomponents cannot print the latest props.

If the data transmitted by the parent component is obtained by the request interface in created, when you go to the parent created and meet the asynchronous task of the request interface, it will be placed in a task queue and continue to execute the life cycle (life cycle is synchronous) hook, and execute the created and mounted of the child component. If the request interface has not started, of course, the latest data cannot be printed, and it can only be printed to the data defined by the parent component in data.

Note: If there is await syntax in created, the code block after await will also be placed in the task queue. First execute the life cycle of the child component, then execute the synchronization code in the parent mounted after the child is mounted, and wait until all synchronous tasks are executed before executing await's asynchronous and the code block after await

2. Synchronize data The data defined by the parent component or the synchronized data in the life cycle of the parent component before the child created is executed.

Synchronous data can be printed directly in the created subcomponents

3. Rendering of child components and how to process asynchronous data of parent components

1. No data that needs to be processed in subcomponents

If the data passed by the parent does not need special processing, no matter the data is synchronous and asynchronous, it can be used for display, because vue is responsive and even if the asynchronous data and other data are updated automatically after the page is refreshed, but if the asynchronous data cannot be printed in the child created, why not print it hahaha

2. The child needs to process the received parent data

Synchronization: can be processed directly in the created writing method

asynchronous:

Solution 1: Watch monitors new data and processes it through methods.

Solution 2: Add v-if to the parent component as follows, and assign a value to the list after requesting the interface, and determine whether the module is displayed by the length of the list.

This ensures that the subcomponent executes the created value that must be the interface value and then process it, which is equivalent to turning the data into synchronous

topModule(v-if="")
data(){
    return {
        list:[]   
     }
}

The above is the detailed content of the life cycle of the parent-child component and the data acquisition problem of the child component. For more information about the life cycle of the parent-child component, please pay attention to my other related articles!