Vue Component内置组件的用法（附带实例）

对于组件来说，除结构和通信组件以外，内置组件也非常重要。本节主要介绍 Vue3 提供的内置组件 Component。

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

现在有一个需求，在父组件中通过点击按钮切换目标子组件。下面通过代码进行演示。

在项目目录 components 下分别新建 Comp1.vue、Comp2.vue、Comp3.vue 文件，其内容结构也非常简单，只有一个字符串。

components Comp1.vue 文件代码如下：

<template>
  <h1>Comp 1</h1>
</template>

components Comp2.vue 文件代码如下：

<template>
  <h1>Comp 2</h1>
</template>

components Comp3.vue 文件代码如下：

<template>
  <h1>Comp 3</h1>
</template>

在父组件的 script 脚本部分，声明一个 ref 类型的响应式数据 tab，将其初始值指定为 Comp1，点击按钮后动态更新为指定的组件。值得一提的是，这里需要利用 markRaw 函数对 comp 进行声明，将 tab 的值设置为非代理对象，其目的是不对组件进行递归响应式数据代理处理，以便增强性能。

在 template 中，只需要将在 <component></component> 上通过 v-is 属性指定为要动态显示的组件标签名，为不同按钮绑定点击监听来调用 changeTab 函数，就能实现 Comp1、Comp2、Comp3 这 3 个组件的动态切换。

App.vue 文件代码如下：

<template>
  <button @click="changeTab(Comp1)">ChangeComp1</button>
  <button @click="changeTab(Comp2)">ChangeComp2</button>
  <button @click="changeTab(Comp3)">ChangeComp3</button>
  <component :is="tab"></component>
</template>

<script setup>
import Comp1 from './components/Comp1.vue';
import Comp2 from './components/Comp2.vue';
import Comp3 from './components/Comp3.vue';
import { ref, markRaw } from 'vue';

// 设置需要切换的组件，初始为Comp1，使用markRaw函数，不对组件进行递归响应式数据代理
const tab = ref(markRaw(Comp1));

// 定义切换组件函数，将组件本身当成参数传递
function changeTab(comp) {
  tab.value = markRaw(comp);
}

// 默认切换显示Comp1组件
changeTab(Comp1);
</script>

运行代码，页面效果如下图所示：

Vue Component内置组件的用法（附带实例）

相关文章