VUE 异步组件

image.png

• 在export外定义一个AsyncList 函数
• component：组件地址
• loading: 显示list组件的加载组件
• error:显示list组件的错误组件
• delay：加载loding组件延迟时间（毫秒为单位）
• timeout :如果500毫秒没加载出来就显示error组件

顺序是先显示200毫秒的loading组件 然后显示list组件 Asynclist需要在components里注册

如果不需要那么复杂 异步组件和路由懒加载一样 用函数import 加载就是异步组件

两种书写方式：

import { defineAsyncComponent } from "vue"

// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))

// with options
const AsyncFooWithOptions = defineAsyncComponent({
  loader: () => import("./demo.vue"),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

tab页案列

<template>
  <div class="component-tab">
    <div class="tab">
      <div v-for="(value,key) in tabData" :key="key" :class="['tab-item',{'active':key ===currentTab}]" @click="switchTab(key)">
        {{value}}
      </div>
    </div>
    
     <!-- 异步组件 -->
    <div class="component">
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>

import Intro from './Introl'
import { defineAsyncComponent } from 'vue'
const List = defineAsyncComponent(() => import('./List'))
const Active = defineAsyncComponent(() => import('./Active'))

export default {
  name: 'ComponentTab',
  data () {
    return {
      currentTab: 'intro',
      tabData: {
        'intro': 'Intro',
        'list': 'List',
        'active': 'Active'
      }
    }
  },
  methods: {
    switchTab (tab) {
      this.currentTab = tab
    }
  },
  computed: {
    currentComponent () {
      switch (this.currentTab) {
        case 'intro':
          return Intro
        case 'list':
          return List
        case 'active':
          return Active
        default:
          break;
      }
    }
  }
}
</script>

<style>
</style>