介绍
如果在Vue中做一个有状态的Tab切换可以用动态组件，如果想要做一个异步任务可以用异步组件
效果
代码
异步组件做了一个2秒后显示内容的异步任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 21</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 动态组件: 根据数据的变化，结合 compoent 这个标签，来随时动态切换组件的现实
// 异步组件: 是异步执行某些组件的逻辑，这叫做异步组件
const app = Vue.createApp({
template: `
<div>
<common-item />
<async-common-item />
</div>
`
});
app.component('common-item', {
template: `<div>hello world</div>`
});
app.component('async-common-item', Vue.defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
template: `<div>this is an async component</div>`
})
}, 4000)
})
}))
const vm = app.mount('#root');
</script>
</html>
2602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
