Table of contents
1. What is a dynamic component
2. How to achieve dynamic component rendering
2. The life cycle function corresponding to keep-alive
3. The include attribute of keep-alive
4. The exclude attribute of keep-alive
5. The name attribute of the component
1. What is a dynamic component
Can dynamically switch the display or hide of components on the page
2. How to achieve dynamic component rendering
Vue provides a built-in <component> component, which is specially used to realize the rendering of dynamic components.
<button @click="name = 'Left'">显示 Left</button>
<button @click="name = 'Right'">显示 Right</button>
<div class="box">
<!-- Render Left and Right components -->
<!-- 1.component is a built-in component of vue, essentially a placeholder -->
<!-- 2. The value of the is attribute indicates the name of the component to be rendered. And should be the name registered under the components node. -->
<!-- 3.keep-alive is a built-in attribute of vue, which can cache internal components instead of destroying components -->
<!-- When using keep-alive, you can specify which components need to be cached by include
Or specify which components do not need to be cached by exclude; but do not use include and exclude at the same time -->
<keep-alive exclude="Right">
<component :is="name"></component>
</keep-alive>
</div>
2. The life cycle function corresponding to keep-alive
1) When the component is cached , the deactivated life cycle function of the component will be automatically triggered
When the component is activated, the life cycle function
When the component is activated for the first time, the created life cycle function will be triggered, and the activated life cycle function will also be triggered
But if the component is activated from the cache, only the activated lifecycle function will be triggered, because the component is not recreated
activated() {
console.log("The component is activated, activated");
}
2) When the component is activated , the activated lifecycle function of the component is automatically triggered
// When the component is cached, the lifecycle function
deactivated() {
console.log("The component is cached, deactivated");
}
3. The include attribute of keep-alive
The include attribute is used to specify that only components with matching names will be cached . Multiple component names are separated by English commas
<keep-alive include="Left">
<component :is="name"></component>
</keep-alive>
4. The exclude attribute of keep-alive
The exclude attribute is used to specify: except the selected matching components will not be cached . Multiple component names are separated by English commas
<keep-alive exclude="Right">
<component :is="name"></component>
</keep-alive>
5. The name attribute of the component
When the name attribute is provided for the component, the name of the component is the value of the name attribute
export default {
name: 'MyLeft',
}
Compared
1. The main application scenario of the "registered name" of the component is: rendering and using the registered component in the page structure in the form of a label
2. The main application scenario of the "name" name when the component is declared: combine the <keep-alive> tag to realize the component cache function; and see the name of the component in the debugging tool
<keep-alive exclude="MyRight">
<component :is="name"></component>
</keep-alive>