Vue3 内置组件之component

Vue3 内置组件之component

概述

<component> 组件提供了动态组件加载功能，它可以在内置组件Component占位点上将自定义组件进行指定目标的渲染。比如页面中常见的Tabs选项卡效果就可以利用动态组件加载功能轻松实现。

使用

定义三个组件：

Comp1.vue:

<template><h2>组件一</h2><p>这是一些内容1111111</p>
</template>

Comp2.vue:

<template><h2>组件二</h2><p>这是一些内容222222</p>
</template>

Comp3.vue:

<template><h2>组件三</h2><p>这是一些内容33333333</p>
</template>

使用component组件：

<script setup>
import {markRaw, ref} from "vue";
import Comp1 from "./components/Comp1.vue";
import Comp2 from "./components/Comp2.vue";
import Comp3 from "./components/Comp3.vue";// 标记为原始对象，表示内部不能被修改
const tab = ref(markRaw(Comp1));// 切换组件
function switchTab(comp) {tab.value = markRaw(comp);
}// 默认显示
switchTab(Comp1);
</script><template><h1>内置组件之component</h1><button @click="switchTab(Comp1)">切换组件一</button><button @click="switchTab(Comp2)">切换组件二</button><button @click="switchTab(Comp3)">切换组件三</button><component :is="tab"></component>
</template>

效果：