[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会显示

相关阅读:
记录一次SQL注入src挖掘过程
WPF:自定义按钮模板
机器学习中分类问题的初步
在Centos7.9_2207安装CDH6.3.2
木棒组合问题
离线数仓搭建_02_服务器配置与数据生产
LongAdder(高性能原子累加器)源码分析
关于AssetBundle禁用TypeTree之后的一些可序列化的问题
ElasticSearch学习笔记：内容有点多，但很实用（包含安装、使用、安全、部署）
107. 如何使用Docker以及Docker Compose部署Go Web应用

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