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

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>

在动态组件上使用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动态组件和异步组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue组件是如何解析及渲染的？

    vue组件是如何解析及渲染的？

    前言 本文将对vue组件如何解析以及渲染做一个讲解. 我们可以通过Vue.component注册全局组件,之后可以在模板中进行使用 <div id="app"> <my-button></my-button> </div> <script> Vue.component("my-button", { template: "<button> 按钮组件</button>"

  • vue如何引用其他组件（css和js）

    vue如何引用其他组件（css和js）

    1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字 组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.

  • vue 递归组件的简单使用示例

    vue 递归组件的简单使用示例

    前言 递归 相信很多同学已经不陌生了,算法中我们经常用递归来解决问题.比如经典的:从一个全为数字的数组中找出其中相加能等于目标数的组合.思路也不难,循环数组取值,不断递归相加,直到满足目标数条件.递归虽然能解决大部分,但弊处在于,很容易写出死循环的代码,导致爆栈.下面以我实际业务场景讲讲递归在vue组件中的应用. 在vue中使用 完成一个完整的递归,我个人认为最重要的有两点: 确定好进入递归的条件; 确定好跳出递归的条件; 其中最重要的就是确定 什么时候跳出递归.递归组件实际上非常简单,就是 A

  • vue 组件基础知识总结

    组件基础 1 组件的复用 组件是可复用的Vue实例. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <

  • Vue实现多页签组件

    Vue实现多页签组件

    直接看效果,增加了右键菜单,分别有重新加载.关闭左边.关闭右边.关闭其他功能. 也可以到我的github上看看代码(如果觉得这个组件有用的话,别忘了顺手给个小星星) 代码:https://github.com/Caijt/VuePageTab 演示:https://caijt.github.io/VuePageTab/ 我这个多页签组件里面的删除缓存的方法不是使用keep-alive组件自带的include.exculde结合的效果,而是使用暴力删除缓存的方法,这个在上个博客中也有提到,用这种方

  • vue实现一个获取按键展示快捷键效果的Input组件

    vue实现一个获取按键展示快捷键效果的Input组件

    遇到一个需求,页面内要自定义快捷键,这就需要可以有地方设置和展示快捷键,找了一圈Element UI发现没有能稍微改改就能用的组件,所以自己动手写了一个. 这个只有快捷键展示功能,快捷键实际绑定生效的话是依赖传回的快捷键数据,由另外的组件处理的.目前只测试了Chrome的环境. 效果如下: 关键点 虽然看起来像是一个Input但在组件内实际上是展示一个标签效果,还需要有删除按钮.这就得在输入框内放下html代码,浏览器的Input组件显然不适合,这就只能自己仿一个类Input组件效果了. foc

  • Vue使用Ref跨层级获取组件的步骤

    Vue使用Ref跨层级获取组件的步骤

    Vue使用Ref跨层级获取组件实例 示例介绍 在开发过程中,我们难免会使用到跨层级的ref实例获取,大部分情况下,我们都可以通过组件自身的parent或者children去找到需要的实例.但是当层级不明显或者太深的时候,用此方法难免过于臃肿和低效率. 如下图所示,我们通过组件E去获取组件D的组件实例. 文档目录结构 分别有A.B.C.D.E和index六个组件,并按照上图的组件顺序,分别插入到各自的页面中. 页面样式如下: 安装vue-ref 下载vue-ref npm install vue-

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue mounted组件的使用

    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置"钩子",应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统.(百度百科) 2.相对于前端来讲 对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行. 3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情 类型:Function 详细: e

  • vue-dialog的弹出层组件

    vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

随机推荐