[Vue] 22.Vue中的组件：动态组件和异步组件

一、要实现通过按钮切换显示哪个组件

传统代码实现方式如下：（v-show给组件设置是否显示）

<!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>21</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {currentItem: 'input-item'}
            },
            methods: {
                handleClick() {
                    if (this.currentItem === 'input-item') {
                        this.currentItem = 'common-item'
                    }else {
                        this.currentItem = 'input-item'
                    }
                }
            },
            template: `
            <input-item v-show="currentItem === 'input-item'"/>
            <common-item v-show="currentItem === 'common-item'"/>
            <button @click="handleClick">切换</button>
            `
        });
        app.component('input-item', {
            template: `
            <input />
            `
        });
        app.component('common-item', {
            template: `<div>Hello world</div>`
        })
        const vm = app.mount('#root')
    </script> 
</body>
</html>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

用动态组件实现
动态组件是根据数据的变化，结合component标签来随时动态切换组件的显示
1）将对两个子组件的引用改为component标签，接收一个is属性参数
2）代码如下

<script>
        const app = Vue.createApp({
            data() {
                return {currentItem: 'input-item'}
            },
            methods: {
                handleClick() {
                    if (this.currentItem === 'input-item') {
                        this.currentItem = 'common-item'
                    }else {
                        this.currentItem = 'input-item'
                    }
                }
            },
            template: `
            <component :is="currentItem" />
            <button @click="handleClick">切换</button>
            `
        });
        app.component('input-item', {
            template: `
            <input />
            `
        });
        app.component('common-item', {
            template: `<div>Hello world</div>`
        })
        const vm = app.mount('#root')
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

二、异步组件
可异步的执行一下组件逻辑，如下代码：

<!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>21</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        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> 
</body>
</html>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

async-common-item组件是一个异步组件，在页面加载之后4s会显示

相关阅读:
uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决，uniapp中如何使用阿里巴巴图标库
Pytorch框架的学习（4）
Docker 恶意挖矿镜像应急实例
推荐系统中纯用户冷启动问题研究
服务器Centos7 静默安装Oracle Database 12.2
Linux服务器搭建Docker
给Python漫画分集标题下载工具开发Qt界面
SpringBoot2.4框架
Halcon 图片分割米粒分水岭（高斯滤波，区域距离计算，分水岭处理）
【C++】容器区别

原文地址：https://blog.csdn.net/u014627255/article/details/125506346