vue 异步组件使用方式

2024-07-09 15:54| 来源: 网络整理| 查看: 265

异步组件的应用场景摘自vue官网

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。 Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

在webpack项目中使用

在这里插入图片描述

全局注册

Main.js

const AsyncComponent = Vue.component('async-component', function (resolve) { //延时演示 setTimeout(function () { require(['./components/AsyncComponent.vue'], resolve) },5000); });

app.vue

export default { name: 'App', }

AsyncComponent

my name is async 局部注册 export default { name: 'App', components: { 'async-component': function (resolve) { //延时演示 setTimeout(function () { require(['./components/AsyncComponent.vue'], resolve) }, 5000); } } } 使用vue自带的工厂函数注册 import loading from './components/Loading.vue' import error from './components/Error.vue' const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: new Promise((reslove) => { setTimeout(()=>{ require(["./components/AsyncComponent.vue"], reslove) },1000); }), // 异步组件加载时使用的组件 loading: loading, // 加载失败时使用的组件 error: error, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：`Infinity` timeout: 3000 }); export default { name: 'App', components: { 'async-component': AsyncComponent } } git 示例

https://gitee.com/study_model/vue-pack-study.git

查看不同分支

【本文地址】

公司简介

联系我们

vue 异步组件 使用方式

vue 异步组件使用方式