vue中使用动态组件

最新推荐文章于 2025-07-11 16:04:01 发布

原创最新推荐文章于 2025-07-11 16:04:01 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue中使用动态组件，通过<component>标签和:is属性实现组件的动态切换与内容渲染。示例代码展示了两个子组件child-one和child-two的动态替换过程，以及按钮触发的切换逻辑。

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

1.怎么使用动态组件?

1.< component >标签
2.:is属性
3.动态组件能自动切换组件，进行内容渲染

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue动态组件</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<component :is="type"></component>
		<button @click="headleBtnClick">change</button>
	</div>
	<script>
		Vue.component('child-one',{
			template: '<div v-once>child-one</div>'
		})

		Vue.component('child-two',{
			template: '<div v-once>child-two</div>' //动态组件每次回销毁一个组件，再创建另一个组件进行显示。  
			//v-once指令可以将静态内容加载入内存中，  
		})

		var vm = new Vue({
			el: '#app',
			data: {
				type: 'child-one'
			},
			methods: {
				headleBtnClick: function(){
					this.type = (this.type === 'child-one'?'child-two' : 'child-one' )
				}
			}
		})
	</script>
</body>
</html>