Vue3 异步组件的使用

妖狐艹你老母 2022-12-24 11:57 242阅读 0赞

Vue3 中 使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ，用法如下：

  1. <template>
  2.   <!-- 异步组件的使用 -->
  3.   <AsyncPage />
  4. </tempate>
  6. <script>
  7. import {  defineAsyncComponent } from "vue";
  9. export default { 
  10.   components: { 
  11.     // 无配置项异步组件
  12.     AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),
  13.     // 有配置项异步组件
  14.     AsyncPageWithOptions: defineAsyncComponent({ 
  15.       loader: () => import(".NextPage.vue"),
  16.       delay: 200, 
  17.       timeout: 3000,
  18.       errorComponent: () => import("./ErrorComponent.vue"),
  19.       loadingComponent: () => import("./LoadingComponent.vue"),
  20.     })
  21.   },
  22. }
  23. </script>

发表评论

表情：
评论列表 （有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue 异步引入组件

    异步操作 以一个工厂函数的方式定义返回你的组件,这个工厂函数会异步解析你的组件定义,Vue只有在这个组件需要被渲染的时候才会触发该工厂函数且会把结果缓存起来供

    心已赠人心已赠人/ 0 赞/ 723 阅读