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

最新推荐文章于 2024-03-09 15:56:47 发布

weiweicn!

最新推荐文章于 2024-03-09 15:56:47 发布

阅读量160

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014627255/article/details/125506346

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

传统代码实现方式如下：（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>

用动态组件实现
动态组件是根据数据的变化，结合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>

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

<!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>