vue3 组件的动态渲染 ＜component :is=“componentTag“ /＞

在Vue 3中，可以使用<component :is="componentTag">来动态渲染不同的组件。componentTag是一个响应式的属性，它可以是一个组件的名称或一个组件的选项对象。

以下是一个简单的例子，演示如何使用<component :is="componentTag">来动态渲染三个不同的组件：

<template>
  <div>
    <button @click="componentTag = 'ComponentA'">显示组件A</button>
    <button @click="componentTag = 'ComponentB'">显示组件B</button>
    <button @click="componentTag = 'ComponentC'">显示组件C</button>
    <component :is="componentTag"></component>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
// 定义三个组件
const ComponentA = { template: '<div>组件A的内容</div>' }
const ComponentB = { template: '<div>组件B的内容</div>' }
const ComponentC = { template: '<div>组件C的内容</div>' }
 
export default {
  setup() {
    const componentTag = ref(null); // 初始化为null或者一个默认组件
    return {
      componentTag,
      ComponentA,
      ComponentB,
      ComponentC
    }
  }
}
</script>

在这个例子中，有三个按钮用来改变componentTag的值，从而改变<component>标签内渲染的内容。ComponentA、ComponentB和ComponentC是三个简单的组件选项对象。当componentTag改变时，<component>标签会动态地渲染对应的组件。