6 vue动态组件

原创于 2018-01-24 15:45:54 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Vue.js实现动态组件的加载与切换。通过按钮点击事件改变组件名，从而达到不同组件之间的动态显示效果。文章提供了完整的HTML及JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html代码

<div id="box">
		<input type="button" @click="a='aaa'" value="aaa组件">
		<input type="button" @click="a='bbb'" value="bbb组件">
		<component :is="a"></component>//选择哪个组件
	</div>

2.js代码

<script>
		var vm=new Vue({
			el:'#box',
			data:{
				a:'aaa'//默认组件
			},
			components:{//组件
				'aaa':{
					template:'<h2>我是aaa组件</h2>'
				},
				'bbb':{
					template:'<h2>我是bbb组件</h2>'
				}
			}
		});

	</script>

3.结果