动态组件---标签页动态切换

最新推荐文章于 2023-12-01 08:54:13 发布

俗世凡人行

最新推荐文章于 2023-12-01 08:54:13 发布

阅读量333

点赞数

分类专栏： Vue 文章标签：动态组件

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107600761

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

动态组件

不同组件之间进行动态切换
通过Vue的<component>元素加一个特殊的is attribute来实现;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标签页的切换</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span @click="changeCom('coma')">切换到A</span>	<br>
			<span @click="changeCom('comb')">切换到B</span>	<br>
			<span @click="changeCom('comc')">切换到C</span>	<br>
			<component :is='currentCom'></component>
			
		</div>
	</body>
</html>
<script type="text/javascript">	
	
	coma = {
		template:`<p>我是1</p>`
	};
	comb = {
		template:`<p>我是2</p>`
	};
	comc = {
		template:`<p>我是3</p>`
	};
	
	var vm = new Vue({
		el:'#app',
		data:{	
			currentCom:coma
		},
		components:{	
			'coma':coma,
			'comb':comb,
			'comc':comc,
			
		},
		methods:{
			changeCom:function(data){
				// alert(data)
				this.currentCom=data
			}
		}
	});
</script>