【Vue】动态组件用法（is 与 keep-alive）

最新推荐文章于 2024-05-07 16:15:58 发布

一颗不甘坠落的流星

最新推荐文章于 2024-05-07 16:15:58 发布

阅读量340

点赞数

分类专栏： Vue 全家桶文章标签： vue.js javascript 前端 keep-alive is

本文链接：https://blog.csdn.net/qq_45677671/article/details/125948498

版权

Vue 全家桶专栏收录该内容

32 篇文章 45 订阅

订阅专栏

文章目录

- 动态绑定 is
- 组件缓存 keep-alive

动态绑定 is

动态组件：有一个 is 属性，is的值是什么名称就调用什么组件
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<component :is="type"></component>
			<ul>
				<li @click="goCon('home')">首页</li>
				<li @click="goCon('list')">列表</li>
				<li @click="goCon('cart')">购物车</li>
				<li @click="goCon('me')">我的</li>
			</ul>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var home = {
				template: `<div>首页</div>`
			}
			var list = {
				template: `<div>列表</div>`
			}
			var cart = {
				template: `<div>购物车</div>`
			}
			var me = {
				template: `<div>我的</div>`
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					type: 'home'
				},
				methods: {
					goCon(type) {
						this.type = type;
					}
				},
				components: {
					home,
					list,
					cart,
					me
				}
			})
		</script>
	</body>
</html>

运行结果：点击li标签，顶部文字会替换成li里面的文字

组件缓存 keep-alive

keep-alive 作用：组件缓存，组件缓存可以增加性能，组件缓存后，组件不需要重新创建，也没有销毁，直接使用缓存中的组件实例就可以了
Props：

属性	说明
include	字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude	字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max	数字。最多可以缓存多少组件实例。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 
			    keep-alive 缓存的组件，在第二次及以后每次进入时，不再执行beforeCreate created beforeMount mounted
			    而是执行keep-alive的钩子函数：
			    activated  进入时触发的钩子
			    deactivated 离开时触发的钩子
			-->
			<keep-alive include="home,cart">
				<component :is="type"></component>
			</keep-alive>
			<ul>
				<li @click="goCon('home')">首页</li>
				<li @click="goCon('list')">列表</li>
				<li @click="goCon('cart')">购物车</li>
				<li @click="goCon('me')">我的</li>
			</ul>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var home = {
				template: `<div>首页</div>`,
				beforeCreate() {
					console.log('首页的创建前执行了');
				},
				created() {
					console.log('首页的创建后执行了');
				},
				beforeMount() {
					console.log('首页的挂载前执行了');
				},
				mounted() {
					console.log('首页的挂载后执行了');
				},
				activated() {
					console.log("keep-alive 组件进入时执行的钩子");

				},
				deactivated() {
					console.log("keep-alive组件离开时执行的钩子");
				}
			}
			var list = {
				template: `<div>列表</div>`
			}
			var cart = {
				template: `<div>购物车</div>`
			}
			var me = {
				template: `<div>我的</div>`
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					type: 'home'
				},
				methods: {
					goCon(type) {
						this.type = type;
					}
				},
				components: {
					home,
					list,
					cart,
					me
				}
			})
		</script>
	</body>
</html>