vue 动态加载组件和按需加载组件

weixin_43795169

于 2021-11-18 09:57:17 发布

阅读量327

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_43795169/article/details/121384293

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现动态加载组件的方法。通过按需加载不同的子组件(info或message)，可以有效减少初始加载时间并提高应用性能。文章展示了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态加载组件

<template>
  <div class="hello">
   <!-- is的值匹配组件的name -->
    <components :is="currentComponents"></components>
  </div>
</template>
<script>
const info=()=>import ('./info.vue')    //按需加载组件
const message=()=>import ('./message.vue')
export default {
  components:{info:info,message:message},
  data () {
    return {
      currentComponents:'info'   //info或者message
    }
  },
}
</script>