vue3动态组件例子

在Vue3中，动态组件是一个强大的特性，允许你在运行时根据数据的变化动态加载并切换不同的组件。以下是一个简单的例子：

<template>
  <div>
    <button @click="switchComponent">切换组件</button>
    <component :is="currentComponent" v-bind="$attrs"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA'); // 初始化当前显示的组件

function switchComponent() {
  if (currentComponent.value === 'ComponentA') {
    currentComponent.value = 'ComponentB'; // 切换到组件B
  } else {
    currentComponent.value = 'ComponentA'; // 切换回组件A
  }
}
</script>

在这个例子中，`<component>`标签用于动态渲染，`:is`属性决定了当前显示的组件是`ComponentA`还是`ComponentB`。当用户点击按钮时，通过修改`currentComponent`的值来改变动态组件。