【Vue3 第十三章】动态组件 & 递归组件 & 组件别名

MagnumHou

已于 2023-09-14 09:17:08 修改

阅读量1.2k

点赞数 1

分类专栏： Vue 前端开发文章标签： javascript vue.js 前端动态组件递归组件

于 2023-01-10 09:33:01 首次发布

本文链接：https://blog.csdn.net/qq_39335404/article/details/128624336

版权

前端开发同时被 2 个专栏收录

86 篇文章 4 订阅

订阅专栏

Vue

64 篇文章 15 订阅

订阅专栏

文章目录

前言

Vue是目前最流行的JavaScript框架之一，它提供了一种简洁、高效的方式来构建用户界面。
在Vue中，组件是可复用的Vue实例，是构建应用程序的核心概念之一。它可以在应用程序中被多次使用。组件可以封装HTML、CSS和JavaScript代码，在需要的时候进行复用。组件可以有自己的模板、数据、方法和生命周期钩子函数。
递归组件、动态组件在项目开发过程中经常会被用到，如：树形结构渲染，需要用到递归组件；选项卡切换，可以用递归组件实现。
递归组件就是指组件在模板中调用自己，开启递归组件的必要条件，就是在组件中设置一个 name 选项。
动态组件允许在多个组件之间进行切换。可以根据不同的条件动态地渲染不同的组件。

数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
 个人博客地址

一、动态组件

1.1 概述

有的时候，我们希望根据一些条件，动态地切换某个组件，或动态地选择渲染某个组件。
VueJS中通过内置组件的 is 属性，动态指定需要显示的组件。

动态组件实现 Tab 切换的效果：
在这里插入图片描述

1.2 演示代码

在父组件中导入这 3 个组件，并动态切换

<script setup>
import Tab1 from '../components/tabs/Tab1.vue';
import Tab2 from '../components/tabs/Tab2.vue';
import Tab3 from '../components/tabs/Tab3.vue';
import { ref, shallowRef, markRaw, reactive } from "vue"

// let cutComp = ref(Tab1)
let cutComp = shallowRef(Tab1)
let cutIdx = ref(0)
let data = reactive([{
    id: 1,
    title: "国际新闻",
    tabName: markRaw(Tab1)
}, {
    id: 2,
    title: "国内新闻",
    tabName: markRaw(Tab2)
}, {
    id: 3,
    title: "热点新闻",
    tabName: markRaw(Tab3)
}])

const toggleTab = (idx) => {
    cutIdx.value = idx
    cutComp.value = data[idx].tabName
}
</script>
<template>
    <div class="tab-wrap">
        <!-- Vue中提供了component元组件用于实现组件的动态切换，基于特殊的属性 is；可以用于切换自定义组件，也可以用于切换原生DOM，当然内置组件也是可以的 -->
        <!-- <component :is="Tab1"></component>
        <component is="input"></component> -->

        <!-- 选项卡切换 -->
        <!-- <ul>
            <li>国际新闻</li>
            <li>国内新闻</li>
            <li>热点新闻</li>
        </ul> -->
        <ul>
            <li v-for="item, index in data" :class="index == cutIdx ? 'active' : ''" @click="toggleTab(index)">{{
                item.title
            }}</li>
        </ul>
        <div class="content">
            <component :is="cutComp"></component>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.tab-wrap {
    width: 300px;

    ul {
        list-style: none;
        display: flex;
        padding: 0;
        justify-content: space-between;
        border: 1px solid #e3e3e3e3;
    }

    li {
        flex: 1;
        padding: 6px 0;
        text-align: center;
        cursor: pointer;

        &.active {
            color: blue;
            font-weight: bold;
        }
    }
}

.content {
    height: 160px;
    padding: 10px;
    border: 1px solid #e7e7e7;
}
</style>

这里的 is 动态绑定的是一个组件对象（Object），它直接指向 a / b / c 三个组件中的一个。除了直接绑定一个 Object，还可以是一个 String，比如标签名、组件名。

二、递归组件

2.1 概述

递归组件就是指组件在模板中调用自己，开启递归组件的必要条件，就是在组件中设置一个 name 选项
递归组件类似于递归函数，就是在当前组件内调用组件本身。一般情况下，不需要 import 引入直接使用即可。
在这里插入图片描述

2.2 示例代码

<script>
    export default {
        name: "MyRecursion"
    }
    </script>
    <script setup>
    const props = defineProps({
        obj: {
            type: Array,
            default: () => []
        }
    })

    const showItem = (title) => {
        console.log(title)
    }
</script>
<template>
    <div>
        <ul v-for="item in obj">
            <li @click="showItem(item.title)"><strong>{{ item.title }}</strong></li>
            <!-- <Tab1 v-if="item?.children?.length" :obj="item?.children" /> -->
            <MyRecursion v-if="item?.children?.length" :obj="item?.children" />
        </ul>
    </div>
</template>

2.3 总结

实现一个递归组件的必要条件：

要给组件设置 name；
要有一个明确的结束条件

递归组件常用来开发具有未知层级关系的独立组件，在业务开发中很少使用。比如常见的有级联选择器和树形控件。
这类组件一般都是数据驱动型的，父级有一个字段 children，然后递归。

三、定义组件别名

采用选项式API语法多写一个 script 去通过 name 注册一个组件别名，当前组件内调用这个组件别名。

<script>
	export default {
		name:"OtherComponentName"
	}
</script>
<script setup>
	/* 当前组件式 API 相关代码 */
</script>
<template>
	/* 模板代码 */
</template>
<style lang='scss' scoped>
	/* 样式代码 */
</style>

unplugin-vue-define-options插件定义组件别名

Element Plus 源码使用这个插件来对组件名进行注册，所以我们完全可以放心的使用。

安装插件

npm install unplugin-vue-define-options -D

vite.config.js 文件添加插件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
import DefineOptions from 'unplugin-vue-define-options/vite';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), DefineOptions()],
});

配置完成后，就可以在组件中直接使用了

<template>
  <button> </button>
</template>
<script setup>
  defineOptions({
    name: 'TButton',
  });
</script>
<style scoped></style>