Vue 异步组件

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <async-item></async-item>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！'
                }
            }
        });

        app.component('async-item',Vue.defineAsyncComponent(()=>{
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    resolve({
                        template:'<div style="background-color: red;height: 200px;height: 200px;">test_resolve_msg</div>'
                    })
                },3000)
            })
        }));

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

 

posted @ 2021-08-22 20:22  残星  阅读(51)  评论(0)    收藏  举报