动态组件允许在不同的组件之间动态切换,这在某些场景下非常有用,比如根据用户的操作切换不同的视图或组件。下面是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Component Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用动态组件 -->
<component :is="currentComponent"></component>
<!-- 切换组件的按钮 -->
<button @click="toggleComponent">Toggle Component</button>
</div>
<script>
// 创建两个组件
var ComponentA = {
template: '<div>Component A</div>'
};
var ComponentB = {
template: '<div>Component B</div>'
};
// 创建 Vue 实例
var app = new Vue({
el: '#app',
data: {
currentComponent: 'ComponentA' // 初始化时显示 ComponentA 组件
},
methods: {
toggleComponent: function() {
// 切换组件
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}
},
components: {
ComponentA,
ComponentB
}
});
</script>
</body>
</html>
在这个例子中,我们定义了两个组件 ComponentA
和 ComponentB
,分别简单地显示了不同的文本内容。然后,在根 Vue 实例中,我们使用了 <component :is="currentComponent"></component>
来渲染动态组件,:is
属性用来动态绑定组件的名称。通过点击按钮 Toggle Component
,我们可以动态切换显示的组件,从而实现了动态组件的功能。