动态组件和异步组件

动态组件：让多个组件使用同一个挂载点，并动态切换，这就是动态组件

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

<script>
var home = {template:'<div>我是主页</div>'};
var post = {template:'<div>我是提交页</div>'};
var archive = {template:'<div>我是存档页</div>'};
new Vue({
  el: '#example',
  components: {
    home,
    post,
    archive,
  },
  data:{
    index:0,
    arr:['home','post','archive'],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})
</script>

　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

动态组件

vue2.x

 

<template> <div> <button @click="show = true">Load Tooltip</button> <div v-if="show"> <Tooltip /> </div> </div> </template> <script> export default { data: () => ({ show: false }), components: { Tooltip: () => import('./components/Tooltip') } } </script>

 

vue3.x

<template>
  <!-- 异步组件的使用 -->
  <AsyncPage />
</tempate>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    // 无配置项异步组件
    AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),

    // 有配置项异步组件
    AsyncPageWithOptions: defineAsyncComponent({
   loader: () => import(".NextPage.vue"),
   delay: 200,
   timeout: 3000,
   errorComponent: () => import("./ErrorComponent.vue"),
   loadingComponent: () => import("./LoadingComponent.vue"),
 })
  },
}
</script>