vue3-异步组件

最新推荐文章于 2024-08-30 19:15:00 发布

零OO

最新推荐文章于 2024-08-30 19:15:00 发布

阅读量193

点赞数

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

本文链接：https://blog.csdn.net/qq_39111074/article/details/120547304

版权

前端专栏收录该内容

224 篇文章 8 订阅

订阅专栏

异步组件实现方法

异步组件- - -父组件调用子组件时，不是马上渲染，根据需要在某时刻进行渲染

如：
js代码：

Vue实例名.component('组件名', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template: `组件内容`
                })
            }, 4000)
        })
    }))

示例：

<!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="root"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `
            <div>
                <div>此例为异步组件：</div>
                <ansync-common-item />    
            </div>
        `
    });

    app.component('ansync-common-item', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template: `<div>这是一个异步组件</div>`
                })
            }, 4000)
        })
    }))

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

</html>