深入了解Vue动态组件和异步组件


Posted in Vue.js onJanuary 26, 2021

1.动态组件

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style>
		#app {
			font-size: 0
		}
		.dynamic-component-demo-tab-button {
			padding: 6px 10px;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			border: 1px solid #ccc;
			cursor: pointer;
			margin-bottom: -1px;
			margin-right: -1px;
			background: #f0f0f0;
		}
		.dynamic-component-demo-tab-button.dynamic-component-demo-active {
			background: #e0e0e0;
		}
		.dynamic-component-demo-tab-button:hover {
			background: #e0e0e0;
		}
		.dynamic-component-demo-posts-tab {
			display: flex;					
		}
		.dynamic-component-demo-tab {
			font-size: 1rem;
			border: 1px solid #ccc;
			padding: 10px;
		}
		.dynamic-component-demo-posts-sidebar {
			max-width: 40vw;
			margin: 0 !important;
			padding: 0 10px 0 0 !important;
			list-style-type: none;
			border-right: 1px solid #ccc;
			line-height: 1.6em;
		}
		.dynamic-component-demo-posts-sidebar li {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			cursor: pointer;
		}
		.dynamic-component-demo-active {
			background: lightblue;
		}
		.dynamic-component-demo-post-container {
			padding-left: 10px;
		}
		.dynamic-component-demo-post > :first-child {
			margin-top: 0 !important;
			padding-top: 0 !important;
		}
 </style>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<button v-for="tab in tabs" class="dynamic-component-demo-tab-button" 
		v-bind:class="{'dynamic-component-demo-active': tab === currentTab}" 
		@click="currentTab = tab">{{ tab }}</button>	
	<keep-alive>
		<component v-bind:is="currentTabComponent"></component>
	</keep-alive>
</div>
<script>
 Vue.component('tab-posts', {
		data: function(){
			return {
				posts: [
					{id: 1, title: 'Cat Ipsum', content: 'Cont wait for the storm to pass, ...'},
					{id: 2, title: 'Hipster Ipsum', content: 'Bushwick blue bottle scenester ...'},
					{id: 3, title: 'Cupcake Ipsum', content: 'Icing dessert souffle ...'},
				],
				selectedPost: null
			}
		},
 template: `<div class="dynamic-component-demo-posts-tab dynamic-component-demo-tab">
						<ul class="dynamic-component-demo-posts-sidebar">
							<li v-for="post in posts" 
								v-bind:key="post.id" 
								v-on:click="selectedPost = post" 
								v-bind:class="{'dynamic-component-demo-active': post===selectedPost}">
								{{ post.title }}
							</li>
						</ul>
						<div class="dynamic-component-demo-post-container">
							<div v-if="selectedPost" class="dynamic-component-demo-post">
								<h3>{{ selectedPost.title }}</h3>
								<div v-html="selectedPost.content"></div>
							</div>
							<strong v-else>
								Click on a blog title to the left to view it.
							</strong>
						</div>
					</div>`
 });
	
	Vue.component('tab-archive', {
		template: '<div class="dynamic-component-demo-tab">Archive component</div>'
	});

 new Vue({
 el: '#app',
		data: {
			currentTab: 'Posts',
			tabs: ['Posts', 'Archive']
		},
		computed: {
			currentTabComponent: function(){
				return 'tab-' + this.currentTab.toLowerCase()
			}
		}
 });
</script>
</body>
</html>

深入了解Vue动态组件和异步组件

在动态组件上使用keep-alive,可以在组件切换时保持组件的状态,避免了重复渲染的性能问题。

2.异步组件

Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。

Vue.component('async-example', function (resolve, reject) {})

这里可以回顾一下 Vue.js — 组件基础。

我们使用通过webpack打包的Vue项目来介绍异步组件。

<!-- HelloWorld.vue -->
<template>
 <div>
 <h2 class="title">{{msg}}</h2>
 </div>
</template>

<script>
export default {
 data () {
 return {
 msg: 'Hello Vue!'
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .title {
 padding: 5px;
 color: white;
 background: gray;
 }
</style>
<!-- App.vue -->
<template>
 <div id="app">
 <HelloWorld/>
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
 name: 'App',
 components: {
 HelloWorld
 }
}
</script>

<style>
</style>

我们把App.vue的<script>标签里面的内容改为:

export default {
 name: 'App',
 components: {
 HelloWorld: () => import('./components/HelloWorld')
 }
}

这样就实现了App组件异步加载HelloWorld组件的功能。

我们可以实现按需加载。

<!-- App.vue -->
<template>
 <div id="app">
 <button @click="show = true">Load Tooltip</button>
 <div v-if="show">
 <HelloWorld/>
 </div>
 </div>
</template>

<script>
export default {
 data: () => ({
 show: false
 }),
 components: {
 HelloWorld: () => import('./components/HelloWorld')
 }
}
</script>

<style>
</style>

这里的异步组件工厂函数也可以返回一个如下格式的对象:

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

参考:

动态组件 & 异步组件 — Vue.js

以上就是深入了解Vue动态组件和异步组件的详细内容,更多关于Vue动态组件和异步组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
You might like
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
header跳转和include包含问题详解
2012/09/08 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python实现随机梯度下降法
2020/03/24 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python3实现表白神器
2019/04/09 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
珍惜时间演讲稿
2014/05/14 职场文书
殡葬服务心得体会
2014/09/11 职场文书
个人授权委托书范本
2014/09/14 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
员工手册董事长致辞
2015/07/29 职场文书