component 动态组件的用法-编程知识

component 动态组件的用法

一：前言

<component></component> 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同需求来更换使用不同的组件。

在最上方的图片中，就是使用的 Element Plus 的 Tags 组件，根据点击的不同来展示不同的组件。以下是项目的目录。

官方解释：

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染

因此 component 标签通常适用于多组件中展示其中一个的情况。可以省略很繁琐的 if 判断。减少代码的冗余性，同时提高可读性。接下来让我们看一下具体的实现吧！

二：各文件代码

1、三个组件的内部代码

因为这三个组件只是测试用，所以内部代码十分简单，这里我就放在一起，没什么难度。

<template><div class="home">这是第一个组件</div>
</template><template><div class="home">这是第二个组件</div>
</template><template><div class="home">这是第三个组件</div>
</template>

2、入口页面代码

这个页面可以看到，首先我们是使用了<el-tabs>组件，将定义的数组进行循环然后渲染成一个具有点击事件的 tab 标签。然后我们定义了一个响应变量 activeName 通过点击不同的标签给其不同的值，然后绑定在 component 上，渲染不同的组价。

<template><div class="home"><el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-change="handleChange"><el-tab-pane v-for="item in check" :label="item.label" :name="item.name"><component :is="activeName"></component></el-tab-pane></el-tabs></div>
</template>
<script setup lang="ts">
import componentOne from './components/componentOne.vue'
import componentTwo from './components/componentTwo.vue'
import componentThree from './components/componentThree.vue'
import { ref } from 'vue'const check: Array = [{name: 'componentOne',label: '第一个'
}, {name: 'componentTwo',label: "第二个"
}, {name: 'componentThree',label: '第三个'
}]const activeName = ref('componentOne')const handleChange = (name: TabPaneName) => {this.activeName = name
}
</script><style>
.demo-tabs>.el-tabs__content {padding: 32px;color: #6b778c;font-size: 32px;font-weight: 600;
}
</style>