component 动态组件的用法

news2024/11/25 4:25:58

一：前言

<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>