动态组件

最新推荐文章于 2024-09-10 16:28:36 发布

dongsdh

最新推荐文章于 2024-09-10 16:28:36 发布

阅读量222

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dongsdh/article/details/105280998

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
	<div id="app">
		<div id="content">
			<component :is="com"></component>
			
			<button @click="chooseContent(1)">首页</button>
			<button @click="chooseContent(2)">列表</button>
			<button @click="chooseContent(3)">新闻</button>
		</div>
	</div>
	
	<script src="vue.js"></script>
	<script>
		let com1 = Vue.component('index-com',{
			name:'indexcom',
			template:'<div><i>测试</i><h1>首页内容</h1></div>'
		})
		let com2 = Vue.component('list-com',{
			template:'<div><i>测试</i><h1>列表内容</h1></div>'
		})
		let com3 = Vue.component('news-com',{
			template:'<div><h1>新闻内容</h1></div>'
		})
		let app = new Vue({
			el:"#app",
			components:{
				com1,com2,com3
			},
			data:{
				com:com1
			},
			methods:{
				chooseContent:function(id){
					console.log(this);
					console.log(id);
					//通过注册id,选择注册好的组件
					this.com = this.$options.components['com'+id]
				}
			}
		});
	</script>
</body>
</html>