Vue3动态组件与异步组件

作者: 温新

分类: 【Vue.js】

阅读: 2974

时间: 2021-08-09 15:28:37

作者：温新

时间：2021-08-09

hi，我是温新，一名PHPer

**动态组件：**通过某个变量值用于判断某个组件的显示问题，如为真显示A，为假显示B；再如选项卡的切换操作等，都可以使用动态组件来实现。

**异步组件：**在很多项目中，需要将一些应用封装成一个个组件，如需要等待一个页面完成后再执行其它组件，Vue3提供了defineAsyncComponent方法来实现异步组件。

动态组件

动态组件：<component :is="变量"/>

<!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>动态组件</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    
    <div id="app"></div>

    <script>
        const app = Vue.createApp({
            data () {
                return {
                    curidx:'demo'
                }
            },
            template:`
            <keep-alive>
            <component :is="curidx" />
            </keep-alive>
            <button @click="toClick">切换</button>
            `,
            methods:{
                toClick(){
                    if (this.curidx === 'demo') {
                        console.log(1)
                        this.curidx='test';
                    }else{
                        console.log(2)
                        this.curidx='demo';
                    }
                }
            }
        });
    
        app.component('demo', {
            template:`<input />`
        });
        app.component('test', {
            template:'<div>hello</div>'
        });

        app.mount('#app');
    </script>
</body>
</html>

异步组件

异步组件：defineAsyncComponent

<!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>异步组件</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    
    <div id="app"></div>

    <script>
        const app = Vue.createApp({
            data () {
                return {
                    curidx:'demo'
                }
            },
            template:`
            <demo></demo>
            <async-com></async-com>
            `,
            methods:{
                toClick(){
                    if (this.curidx === 'demo') {
                        console.log(1)
                        this.curidx='test';
                    }else{
                        console.log(2)
                        this.curidx='demo';
                    }
                }
            }
        });
    
        app.component('demo', {
            template:`hi vue3`
        });

        // 异步组件
        app.component('async-com',Vue.defineAsyncComponent( ()=>{
            return new Promise((resolve, reject) => {
                setTimeout( ()=> {
                    resolve({
                        template:`<div>我是一个异步组件</div>`
                    });
                }, 3000);
            });
        } ));

        app.mount('#app');
    </script>
</body>
</html>

demo组件渲染完毕后，等待3秒再渲染async-com组件。

我是温新

第天进步一点，就一点点

请登录后再评论