The solution to the problem that the parent component of vue crawls asynchronously passes parameters to the child component and does not get the value from the child component

I encountered a strange thing when working on the project: the
parent component <dialog-info/>passed a parameter arrdata to the child component , which is an array.

Because it is an Array type parameter, the child component received it, and the default returned an empty array through the function, and

then the child component was routinely verified. Did you get the value normally? I was

shocked, it turned out to be an empty array!

But the props in the Vue debugging tool are normally obtained. It's a

bit interesting. Then I thought about it based on the project structure and found out where the problem was.

The project is like this:

This is the page where the parent component is located. Click the blue button to add it, and the callback method will be triggered to display the <DialogInfo>child component
. The value passed by the parent component to the child component arrdatais obtained here by listening asynchronously

and then rendered in In this list:

Here is the issue of component loading order. Why can’t I get data from the sub-components just now? Because when the child component is <DialogInfo>loaded, the parent component has not yet obtained the asynchronous return value.

So in order to get the value, we can judge from the parent component. Only when the value is obtained, that is, the length of the value of the array passed by the parent component to the child component is not 0, then rendering:

This ensures that the child component must wait The parent component prepares the data, and then loads it, the result:

There is a solution!

It is through the <el-dialog>built-in method of the elementui component openedor the openexecution of the callback function. These two functions will be <el-dialog>executed after the component is opened.

My child component <dialog-info>is a packaged <el-dialog>component, so as long as the dialog is opened, it will be available in the callback function. The value passed by the parent component!

The opened method is bound to the child component:

define a callback method and return:

so that when we click the button, the dialog will pop up

and we can get the value in the callback method, because the data has already been obtained at this time: