vue3 components动态组件
时间: 2023-11-16 14:04:34 浏览: 47
Vue3中可以使用<component>标签来实现动态组件。具体实现方式如下:
1. 在父组件中定义一个变量来存储要渲染的子组件名称。
2. 使用<component>标签,并将is属性绑定到存储子组件名称的变量上。
示例代码如下:
```html
<template>
<div>
<button @click="toggleComponent">Toggle Component</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>
```
在上面的示例中,我们定义了两个子组件ComponentA和ComponentB,并在父组件中使用<component>标签来动态渲染这两个组件。通过点击按钮,我们可以切换当前渲染的子组件。