Vue3 知识点记录（三）：动态组件和异步组件

动态组件

场景：在同一个页面中动态的显示不同的组件

方式一：可以通过 v-if 来判断，然后渲染不同的组件。

方式二：使用动态组件。

方式三：使用路由的方式。

动态组件的基本使用

Vue 内部封装的 component 组件可以用来渲染组件

import Home from '@/page/Home.vue'

<template>
    <div>
        // 渲染 home 组件
        <component is='home'></component>
    </div>
</template>

如果想要根据不同的情况动态的渲染不同的组件，可以给 is 属性绑定一个变量，然后通过动态的修改这个变量的值来渲染不同的组件

<template>
    <div>
        <component :is='page'></component>
    </div>
</template>

export default {
   data() {
     return {
       page: 'home'
     }
   }
}

动态组件的传值

当我们通过动态组件的方式来渲染组件时，如果想要给组件传值或者监听事件时，可以将属性和监听事件放到 component 组件上来使用，就像我们在使用普通组件时那样。

 <template>
     <div>
         <component :is='page' name='tangting' :age='18' @pageClick='pageClick'></component>
     </div>
 </template>

异步组件

在开发过程中，如果项目过大，我们可以通过对某些组件进行异步加载的方式来调用。

正常调用：

  import Home from "@/page/Home.vue"
  
  export default {
    components: {
      Home,
    }
  }

异步调用：

  // 必须使用 Vue 内置的 defineAsyncComponent 函数来进行调用
  
  import { defineAsyncComponent } from 'vue'
  
  const Home = defineAsyncComponent(() => import("@/page/Home.vue"))
  
  export default {
    components: {
      Home,
    }
  }

通常情况下异步组件跟 suspense 组件一起使用

<suspense>
   <template #default>
     <home />
   </template>
   <template #fallback>
     <div>
       Loading...
     </div>
   </template>
 </suspense>