vue异步组件使用

最新推荐文章于 2025-10-01 20:34:44 发布

原创最新推荐文章于 2025-10-01 20:34:44 发布 · 875 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js

本文介绍了一种在Vue中使用异步组件的方法，通过按钮触发显示隐藏操作来按需加载子组件，以此实现资源的有效利用并提升用户体验。

异步组件一般用于组件不想立马加载

当我们点击一个按钮的时候，进行显示子组件的内容。一般情况下我们这样使用。

asyncComp.vue

<template>
    <div class="asyncComp">
        <!-- 异步组件使用 -->
        <button @click="btnClick">按钮</button>
        <div v-if="show">
            <List/>
        </div>
    </div>
</template>

<script>
import List from './comp/list.vue'
export default {
    name:"asyncComp",
    components: {
        List
    },
    data() {
        return {
            show:false
        }
    },
    methods: {
        btnClick(){
            this.show = !this.show
        }
    }
}
</script>
<style lang="scss" scoped>
    .asyncComp {
        
    }
</style>

list.vue

<template>
    <div class="list">
        异步组件内容
    </div>
</template>

<script>
export default {
    name:"list",
}
</script>

list组件的代码是下载好的，在我们点击切换的时候，不会再进行下载。

异步组件：

使用方式如同路由懒加载。

组件在切换的时候进行加载。

<template>
    <div class="asyncComp">
        <!-- 异步组件使用 -->
        <button @click="btnClick">按钮</button>
        <div v-if="show">
            <List/>
        </div>
    </div>
</template>

<script>
export default {
    name: "asyncComp",
    data() {
        return {
            show: false
        }
    },
    methods: {
        btnClick() {
            this.show = !this.show
        }
    },
    components: {
        List: () => import(/*webpackChunkName:"list"*/ './comp/list') //使用webpack的import方法
    },
}
</script>

点击的时候查看控制台会发现多了list文件。