动态组件和异步组件

最新推荐文章于 2022-11-16 23:07:11 发布

@huihui_new

最新推荐文章于 2022-11-16 23:07:11 发布

阅读量120

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_52544128/article/details/114093040

版权

<!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>
    //动态组件：根据数据的变化，结合component 这个标签，来随时动态切换组件的实现
    //异步组件：异步执行某些组件的逻辑，这叫做异步组件

    const app = Vue.createApp({
        data() {
            return {
                currentItem: 'input-item'
            }
        },
        methods: {
            handleClick() {
                this.currentItem === 'input-item' ? this.currentItem = 'common-item' : this.currentItem = 'input-item';
            }
        },
        //keep-alive 保留缓存
        //  <component :is="name" /> 动态组件
        template: `
            <keep-alive>
                <component :is="currentItem" />
            </keep-alive>
            <input-item v-show="currentItem === 'input-item'" />
            <common-item v-show="currentItem === 'common-item'" />
            <button @click="handleClick">change</button>
            <common-item />
            <async-common-item />
        `
    });
    app.component('common-item', {
        template:`
            <div>hello-world</div>
        `
    });
    app.component('input-item', {
        template:
            `<div>
                <input />
            </div>`
    });

    app.component('async-common-item',Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template:`<div>this is an async component</div>`
                })
            }, 4000);
        })
    }))
    app.mount('#root');
    
</script>
</html>