37.Vue异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块，并且Vue把结果缓存起来，用于后面的再次渲染。

官网详解

案例还是使用动态组件 讲解

效果

image.png

案例

index.vue

<template>
  <div>
      <component :is="cmpName"></component> <br/>
      <button @click="changeCmp('cmpone')">第一个组件</button>
      <button @click="changeCmp('cmptwo')">第二个组件</button>
      <button @click="changeCmp('cmpthree')">第三个组件</button>
  </div>
</template>
<script>
// 导入子组件 （默认一开始不加载所有子组件）
// import cmpone from './cmpone'
// import cmptwo from './cmptwo '
// import cmpthree from './cmpthree '
export default {
  // 注册组件
  components: {]
    // 使用异步加载组件方式，只有使用改组件时才加载
    cmpone: () => import('./cmpone'),
    cmptwo: () => import('./cmptwo'),
    cmpthree: () => import('./cmpthree')
  },
  methods: {
    changeCmp(cmpName) {
      this.cmpName = cmpName
    }
  },
  data(){
    return {
      cmpName: 'cmpone' //默认显示第一个组件
    }
  }
}
</script>

cmpone.vue

<template>
  <div>这是子组件1</div>
</template>

cmptow.vue

<template>
  <div>这是子组件2</div>
</template>

cmpthree.vue

<template>
  <div>这是子组件3</div>
</template>