What is a dynamic component
Dynamic components can switch different components at any time according to the changes in data. For example, we are now going to display a text box and an input box. We want to decide whether to display a text box or an input box based on the values defined in our data. If we use the knowledge we learned before, we will use the v-show method to do it. Although it can be implemented, it is more complicated and has a lot of code. At this time, using dynamic components can solve this problem well.
What is an asynchronous component
Asynchronous components can load components asynchronously. In actual projects, we can split large projects into many small JS files and combine them when used, and can achieve lazy loading. Some components do not need to be displayed to users for the time being. We can wait until the user sees them before loading them.
Example analysis
Dynamic Components
Display an input box or text. With a button, you can switch the display after clicking. For example, when you click the button, it will become a display input box. The code is as follows:
First, we define two components, one displays the input box and the other displays the text
('input-item',{
template:`
<input />
`
});
('common-item',{
template:`<div>hello world</div>`
});
Define a currentItem variable to control the display of components
data() {
return {
currentItem: 'input-item'
}
},
Use the component keyword when using the component and then use:is = "Show the dependency data of a specific component (currentItem in this example)"Dynamically load components
template:
`
<keep-alive>
<component :is="currentItem"/>
</keep-alive>
<button @click="handleClick">switch</button>
`
keep-alive: The value in the component will be cleared when the component is switched, such as the value in the input box, so keep-alive needs to be used to prevent the value from being cleaned.
Define the method to execute after clicking the button. This method is to change the value of the current Item and let it display different components.
methods: {
handleClick(){
if( === 'input-item'){
= 'common-item';
}else{
= 'input-item';
}
}
}
All codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Components</title>
<script src="/vue@next"></script>
</head>
<body>
<div ></div>
</body>
<script>
const app = ({
data() {
return {
currentItem: 'input-item'
}
},
methods: {
handleClick(){
if( === 'input-item'){
= 'common-item';
}else{
= 'input-item';
}
}
},
template:
`
<keep-alive>
<component :is="currentItem"/>
</keep-alive>
<button @click="handleClick">switch</button>
`
});
('input-item',{
template:`
<input />
`
});
('common-item',{
template:`<div>hello world</div>`
});
const vm = ('#root');
</script>
</html>Asynchronous Components
If we want to display a text, the text will not be displayed immediately, but will be displayed in 4 seconds.
First define two components, one synchronous component and one asynchronous component
Define synchronization components
('common-item',{
template:`<div>hello world</div>`
})
Define asynchronous components, useDefine asynchronous components
('async-common-item',
(()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({
template:`<div>this is an async component</div>`
})
},4000)
})
}));
Usage Components
const app = ({
template:
`
<div>
<common-item />
<async-common-item />
</div>
`
});
All codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asynchronous Components</title>
<script src="/vue@next"></script>
</head>
<body>
<div ></div>
</body>
<script>
const app = ({
template:
`
<div>
<common-item />
<async-common-item />
</div>
`
});
('common-item',{
template:`<div>hello world</div>`
})
// Asynchronous components: Components can be loaded dynamically through asynchronous components, and large projects can be split into many small JS files, and then combined when used. ('async-common-item',
(()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({
template:`<div>this is an async component</div>`
})
},4000)
})
}));
const vm = ('#root');
</script>
</html>
Summarize
This article mainly introduces the definition and usage methods of dynamic components and asynchronous components. Dynamic components allow us to decide which component to display through certain conditions. Asynchronous components allow us to implement the lazy loading of components, so that large projects can be split into many small JS files and then combined when used. It is very convenient.
This is the end of this article about Vue dynamic components and asynchronous components. For more related contents of Vue dynamic components and asynchronous components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!