【Vue】—异步组件

梦里梦外; 2022-09-11 12:29 310阅读 0赞

【Vue】—异步组件

一、 组件引入方式：提前引入

  1. import CompA from './components/CompA.vue'
  4.     components:{ 
  5.        CompA
  6.    }

二、 异步引入

  1. components:{ 
  2.        CompA:()=>import('./components/CompA.vue')
  3.    }

三、处理加载状态

  1. const AsyncComponent = () => ({ 
  2.   // 需要加载的组件 (应该是一个 `Promise` 对象)
  3.   component: import('./MyComponent.vue'),
  4.   // 异步组件加载时使用的组件
  5.   loading: LoadingComponent,
  6.   // 加载失败时使用的组件
  7.   error: ErrorComponent,
  8.   // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  9.   delay: 200,
  10.   // 如果提供了超时时间且组件加载也超时了，
  11.   // 则使用加载失败时使用的组件。默认值是：`Infinity`
  12.   timeout: 3000
  13. })

四、

发表评论

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

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

相关阅读

    相关 Vue.js之组件异步加载

    当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。 此时，我们就需要使用

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 522 阅读

    相关 vue 异步引入组件

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

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