Vue的动态组件与v-once功能介绍

最新推荐文章于 2023-12-18 22:33:56 发布

不是，你来真的啊？

最新推荐文章于 2023-12-18 22:33:56 发布

阅读量259

点赞数

分类专栏： Vue 前端基础· 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43724848/article/details/104420897

版权

基础· 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

26 篇文章 0 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>test</title>
	</head>
	<body>
		<div id="app">
			<!-- 在这里component就是动态组件，可以进行view界面的切换 -->
			<!-- 显示child1的时候child2就被销毁了，child1创建出来，有点消耗性能 -->
			<component :is="type"></component>
			
			<!-- 当然在我下列这两行依然也可以实现切换的效果 -->
			
			<!-- <child1 v-if="type === 'child1'"></child1> -->
			<!-- <child2 v-if="type === 'child2'"></child2> -->
			<input type="button" name="" id="" value="切换" @click="clickIt"/>
		</div>
		
		<script type="text/javascript">
			// 这两个组件都加了v-once是因为v-once，当元素在页面上显示的时候，页面就会
			// 将这个元素里面得内容进行包留，下次需要的时候可以直接调用出来，可以增高性能
				// 所以v-once在vue中是可以提高静态效果的效率的
			Vue.component('child1' , {
				template:'<p v-once>我是第一个</p>'
			})
			Vue.component('child2' , {
				template:'<p v-once>我是第二个</p>'
			})
			
			
			
			var vm = new Vue({
				el:'#app',
				data:{
					type:'child1'
				},
				methods:{
					clickIt(){
						//这里是三元表达式来确定type的显示对象，如果是child1那么就该让他显示child2了
						this.type = (this.type==='child1'?'child2':'child1')
					}
				}
			})
		</script>
	</body>
</html>

具体的内容我都写在注释里了。如有错误，请指教。