首页 » 文章 » 文档 » vuejs 使用问题 » Vue 异步加载组件(高级)

Vue 异步加载组件(高级)

异步组件

  • import() 函数
  • 按需加载,异步加载大组件

举个列子,比如有个 FormDemo.vue 大组件

<template>
    <div>
        表单编辑器大组件
    </div>
</template>

<script>
export default {
    data() {
        return {}
    }
}
</script>

然后实现按需加载的效果

<template>
    <div>
        <!--异步加载组件-->
        <FormDemo v-if="showFormDemo"/>
        <button @click="showFormDemo=true">加载 FormDemo</button>
    </div>
</template>

<script>
    export default {
        name: "index",
        components: {
            // 按需加载,可以看下浏览器 network 的效果
            FormDemo: () => import('./FormDemo')
        },
        data() {
            return {
                showFormDemo: false
            }
        }
    }
</script>

»vuejs 使用问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top