Learn more about dynamic components in Vue

What is a dynamic component? This article will give you a detailed understanding of the dynamic components in Vue essential knowledge for getting started, and introduce how to implement dynamic component rendering and keep-alive components. I hope it will be helpful to everyone!

1. What is a dynamic component

Dynamic components refer to Dynamically switch the display and hiding of components. (Learning video sharing: vue video tutorial)

2. How to implement dynamic component rendering

vue provides a The built-in <component></component> component is specially used to implement the rendering of dynamic components. The sample code is as follows:

3. Use keep-alive to maintain state

By default, when switching dynamic components Unable to maintain the state of the component. At this time, you can use vue's built-in <keep-alive></keep-alive> component to maintain the state of the dynamic component. The sample code is as follows:

4. The life cycle function corresponding to keep-alive

• When the component is cached, the component's deactivated life cycle function will be automatically triggered.

• When the component is activated, the activated life cycle of the component will be automatically triggered function.

The sample code is as follows:

Warm reminder:

• keep -alive will cache internal components instead of destroying components;
• When using keep-alive, you can specify which components need to be used by include be cached; or, specify which components do not need to be cached through the exclude attribute; however: do not use the include and exclude attributes at the same time;

5. The include attribute of keep-alive

include attribute is used to specify: only components with matching names will is cached. Use English commas to separate multiple component names:

The sample code is as follows:

(Learning video sharing : Web front-end development, Basic programming video)

The above is the detailed content of Learn more about dynamic components in Vue. For more information, please follow other related articles on the PHP Chinese website!