Vue3使用动态组件 Component

在Vue 3中，可以使用<component>元素来实现动态组件的渲染。这个元素的is属性可以根据当前的状态动态地绑定到不同的组件上。

以下是一个简单的例子：

<template>
  <div>
    <!-- 使用component元素来动态渲染组件 -->
    <component :is="currentComponent"></component>
 
    <!-- 按钮用来切换不同的组件 -->
    <button @click="switchComponent('component-a')">Show Component A</button>
    <button @click="switchComponent('component-b')">Show Component B</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
// 假设有两个简单的组件
const ComponentA = {
  template: '<div>Component A</div>'
};
 
const ComponentB = {
  template: '<div>Component B</div>'
};
 
export default {
  setup() {
    // 使用ref来跟踪当前组件
    const currentComponent = ref('component-a');
 
    // 切换组件的函数
    function switchComponent(component) {
      currentComponent.value = component;
    }
 
    // 返回响应式引用，以便在模板中使用
    return {
      currentComponent,
      switchComponent,
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在这个例子中，我们定义了两个组件ComponentA和ComponentB，并通过一个名为currentComponent的响应式引用来控制当前渲染哪一个组件。通过点击按钮，switchComponent函数被触发，并更新currentComponent的值来切换显示的组件。