Use background:
In a recent project, when using parent-child components to pass values, I encountered this problem.
At first, I used v-bind , and then the child components used props to receive the values passed by the parent components. The
parent component of this method:
Subassembly:
However, it was found that the subcomponent could not get props when the dom was rendered for the first time , and it would only be obtained when it was rendered again.
So instead, use the method of binding ref to the subcomponent, and then use the method of this.$refs to change a certain value of the subcomponent value
But I still encountered the same problem when using ref, and an error that the subcomponent property was undefined was reported when it was rendered for the first time
problem causes:
Because the rendering method of the component is dynamic rendering, and the props of ref and vue2 are not responsive . If it is vue3, the props are responsive.
Here is because my parent component is dialog , which is controlled by visible , so Every time the data is dynamically rendered, the data cannot be dynamically and timely responded.
Dynamic rendering also includes v-if , or other components that need to be displayed and hidden dynamically . If you use parent-child components to pass values, it will cause problems because they are not responsive.
Solution:
Use the setTimeout method, set the delay time to 0 , and do an immediate execution.
If you use props, the solution is the same . Use setTimeout when the parent component assigns the value to be passed to the child component. Of course, this is just what I found out. method, if there is another method, please leave a message to let me know