Vue异步组件Demo
2023-09-27 14:26:44 时间
Vue异步组件Demo
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
下面是我写的一个简单Vue异步组件Demo。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<script>
// 如果浏览器不支持Promise就加载promise-polyfill
if ( typeof Promise === 'undefined' ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
document.head.appendChild( script );
}
</script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" style="font-size: 22px">
<!-- 异步组件async-comp -->
<async-comp :list="['我是一个异步组件,','如果加载完成,','我就会在这里显示']"></async-comp>
</div>
<!-- 引入main.js -->
<script src="/main.js"></script>
</body>
</html>
异步组件Async-Comp.js,
- 注意,Async-Comp.js并没有在index.html中引用,而是在下面的main.js中动态加载。
window.async_comp = {
template: '\
<ol>\
<li v-for="item in list">{{ item }}</li>\
</ol>',
props: {
list: Array
}
};
main.js
var vm = new Vue( {
el: '#app',
components: {
/* 异步组件async-comp */
'async-comp': function () {
return {
/** 要渲染的异步组件,必须是一个Promise对象 */
component: new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = '/Async-Comp.js';
document.head.appendChild( script );
script.onerror = function () {
reject( 'load failed!' );
}
script.onload = function () {
if ( typeof async_comp !== 'undefined' )
resolve( async_comp );
else reject( 'load failed!' )
}
} ),
/* 加载过程中显示的组件 */
loading: {
template: '<p>loading...</p>'
},
/* 出现错误时显示的组件 */
error: {
template: '\
<p style="color:red;">load failed!</p>\
'
},
/* loading组件的延迟时间 */
delay: 10,
/* 最长等待时间,如果超过此时间,将显示error组件。 */
timeout:3200
}
}
}
} )
see github
相关文章
- vue组件样式穿透/deep/ ::v-deep >>>区别
- 学好vue,靠他就行了---vue基础知识与原理(一)
- 精品springboot的二手车管理系统vue
- vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
- VUE注册局部组件
- 微信小程序食堂订餐点餐项目+后台管理系统|前后分离VUE
- this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
- vue+leaflet 地图相关
- VUE组件汇总
- Vue + ElementUI的电商管理系统实例22 项目优化-为开发模式与发布模式指定不同的打包入口
- 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
- Vue-Cli 3.0 中配置高德地图的两种方式
- 【Vue全家桶】细说组件中的生命周期
- vue 实现实时获取大文件下载进度
- JavaScript Vue 获取文件md5值
- vue运行报错 ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- html文件里怎么引用vue组件?
- Vue hookEvent监听组件生命周期
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的异步组件
- 开源一个用 vue 写的树层级组件 vue-ztree
- Vue 初接触实战之账单组件
- vue——使用轮播组件swiper,设置 loop为true后,点击事件失效及轮播索引错乱问题