通用vue项目应对定制化时该如何组件化

分析页面-页面组件化

 之前写了一个项目,大屏页面是通用页面但是遇到个别用户想要定制化,但是主页如果去做判断显得太过臃肿,后续也无法判断,由于公司不想维护多套代码,于是就考虑抽离成组件!直接看代码!

 之前只有一个页面为'zhsy',考虑到别的地方有跳转到'zhsy',由于不能影响别的页面的跳转逻辑,所以这边考虑到把'zhsy'里面的代码抽离成组件,然后通过引入组件然后组测组件,最后通过后端返回的定制化的名字来控制页面显示

<template><component :is="dom[curSy]" />
</template>
<script setup>
import tyZhsy from './tyzhsy.vue'
import mcZhsy from './otherZhsy/mcZhsy.vue'
const curSy = ref('tyZhsy');
const store = useStore();
let name = store.getters.diffSystem.name
const dom = shallowReactive({tyZhsy, mcZhsy
})const changeName = () => {curSy.value = name + 'Zhsy'
}
changeName()
</script>
<style scoped lang="scss"></style>

2.vite项目中如果想要更灵活,可以考虑动态引入组测组件来实现这个功能,先通过import.meta.glob("./*.vue"),引入所有文件然后再遍历文件后注册组件,成为全局组件,具体是否为全局组件看个人需求使用,这样全局上就有所有的定制化组件,再通过后端返回的组件名,动态渲染

const modules = import.meta.glob("./*.vue");
const lsbjcomponents = {install: function (app) {for (let path in modules) {modules[path]().then((mod) => {const fileName = path?.split("/").pop().replace(".vue", "");app.component(fileName, mod["default"]);});}},
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/49429.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

electron的使用和操作

文章目录 先创建一个基本的electron应用electron生命周期事件单个窗体事件创建窗体时所携带的一些属性 先创建一个基本的electron应用 先安装 npm install --save-dev electron然后在package.json里面创建如下内容 {"name": "my-electron-app","ve…

shell脚本语句(画矩形、三角形、乘法表和小游戏)(#^.^#)

目录 一、语句 一、条件语句 一、以用户为例演示 一、显示当前登录系统的用户信息 二、显示有多少个用户 二、单分支if 一、输入脚本 二、验证结果 三、双分支if 一、输入脚本 二、验证结果 四、多分支if 一、输入脚本 二、验证 二、循环语句 一、shell版本的循环…

vue的图片懒加载

安装&#xff1a; vueuse 插件 npm i vueuse/core 搜索&#xff1a; useIntersectionObserver 方法 import { ref } from vue import { useIntersectionObserver } from vueuse/coreexport default {setup() {const target ref(null)const targetIsVisible ref(false…

c语言关键字_ _align()和_ _packed的使用以及字节对齐原理

c语言中__align()关键字的作用与内存对齐的原理 1、什么是字节对齐 字节对齐(Byte Alignment)是计算机内存中的一种存储优化技术,用于确保数据在内存中的存储位置满足特定的硬件要求,以提高内存访问的效率。在现代计算机体系结构中,许多处理器要求数据以特定的方式对齐,…

k8s集群中service的域名解析、pod的域名解析

前言 在k8s集群中&#xff0c;service和pod都可以通过域名的形式进行相互通信&#xff0c;换句话说&#xff0c;在k8s集群内&#xff0c;通过service和pod的域名&#xff0c;可以直接访问内部应用&#xff0c;不必在通过service ip地址进行通信&#xff0c;一般的&#xff0c;…

空调企业只干空调,卡萨帝却干了业主想不到的事

作者 | 曾响铃 文 | 响铃说 今年入夏以来&#xff0c;随着气温的不断攀升&#xff0c;空调已经成为生活、工作中的“绝对刚需”。由此而来的则是空调产品的销量大增。 但也有不少消费者表示&#xff0c;随着产品功能的越发相似&#xff0c;价格趋同&#xff0c;使空调变得越…

类的加载过程二:Linking

1、验证&#xff08;Verify&#xff09; 目的在于确保Class文件的字节流中包含信息符合当前虚拟机要求&#xff0c;保证被加载类的正确性&#xff0c;不会危害虚拟机自身安全。主要包括四种验证&#xff0c;文件格式验证&#xff0c;元数据验证&#xff0c;字节码验证&#xff…

Postman 如何进行参数化

前言 Postman作为一款接口测试工具&#xff0c;受到了非常多的开发工程师的拥护。 那么做为测试&#xff0c;了解Postman这款工具就成了必要的了。 这篇文章就是为了解决Postman怎么进行参数化的。 全局变量 全局变量是将这个变量设置成整个程序的都可以用&#xff0c;不用去…

装箱和拆箱

1. 概念 装箱 将值类型转换成等价的引用类型 装箱的步骤 拆箱 将一个已装箱的引用类型转换为值类型&#xff0c;拆箱操作需要声明拆箱后转换的类型 拆箱的步骤 1&#xff09;获取已装箱的对象的地址 2&#xff09;将值从堆上的对象中复制到堆栈上的值变量中 2. 总结 装箱和拆箱…

数组指针、函数指针、指针数组、函数 指针数组、指针函数详细总结

1.数组指针概念和应用 首先数组指针应该是一个数组&#xff0c;它的定义如下&#xff1a; 数组指针&#xff0c;指的是数组名的指针&#xff0c;即数组首元素地址的指针。即是指向数组的指针。例&#xff1a;int (*p)[10]; p即为指向数组的指针&#xff0c;又称数组指针。 数…

Microsoft Visual Studio + Qt插件编程出现错误error MSB4184问题

文章目录 报错解决 报错 C:\Users\Administrator\AppData\Local\QtMsBuild\qt_globals.targets(786,7): error MSB4184: 无法计算表达式“[System.IO.File]::ReadAllText(C:\Users\Administrator\AppData\Local\QtMsBuild\qt.natvis.xml)”。 未能找到文件“C:\Users\Administ…

C语言:指针(超深度讲解)

目录 指针&#xff1a; 学习目标&#xff1a; 指针可以理解为&#xff1a; 字符指针&#xff1a; 定义&#xff1a;字符指针 char*。 字符指针的使用&#xff1a; 练习&#xff1a; 指针数组&#xff1a; 概念&#xff1a;指针数组是一个存放指针的数组。 实现模拟二维…

NetApp EF 系列全闪存阵列 EF600 和 EF300 ——经济实惠、性能极高的全闪存存储系统、 适用于各种混合型企业工作负载

NetApp EF 系列全闪存阵列 EF600 和 EF300 ——经济实惠、性能极高的全闪存存储系统、 适用于各种混合型企业工作负载 功能强大且经济实惠的性能 NetApp EF600 全闪存阵列专为需要最高性能的工作负载而设计。NetApp EF300 阵列专为大数据分析和数据库等混合工作负载环境而设计…

NPDP认证适合什么人考?这个职业必考!

NPDP认证全称为New Product Development Professional&#xff0c;是指由Product Development and Management Association&#xff08;PDMA&#xff09;颁发的产品经理国际资格认证认证。 NPDP认证旨在评估和认证具有新产品开发知识、技能和经验的个人。与PMP证书不同&#x…

MySQL 临时表与内存表的区别

文章目录 1.临时表2.内存表3.区别4.小结 在 MySQL 中&#xff0c;Temporary Table&#xff08;临时表&#xff09;和 Memory Table&#xff08;内存表&#xff09;是两种不同的表类型&#xff0c;它们有一些重要的区别和用途。 1.临时表 临时表&#xff08;Temporary Table&a…

AMBA总线协议(8)——AHB(六):分割传输

一、前言 在之前的文章中&#xff0c;我们重点介绍了AHB传输的仲裁&#xff0c;首先介绍了仲裁相关的信号&#xff0c;然后分别介绍了请求总线访问&#xff0c;授权总线访问&#xff0c;猝发提前终止&#xff0c;锁定传输和默认主机总线&#xff0c;在本文中我们将继续介绍AHB的…

网络编程套接字(1)

文章目录 网络编程套接字(1)1. 预备知识1.1 源IP与目的IP1.2 认识端口号1.3 理解 "端口号" 和 "进程ID"1.4 源端口号和目的端口号1.5 认识TCP协议和UDP协议(1) TCP(2) UDP 1.6 网络字节序 2. socket编程接口2.1 socket 常见API2.2 sockaddr结构 网络编程套…

.NET6.0 System.Drawing.Common 通用解决办法

最近有不少小伙伴在升级 .NET 6 时遇到了 System.Drawing.Common 的问题&#xff0c;同时很多库的依赖还都是 System.Drawing.Common &#xff0c;而 .NET 6 默认情况下只在 Windows 上支持使用&#xff0c;Linux 上默认不支持这就导致在 Linux 环境上使用会有问题&#xff0c;…

低代码解放生产力,助力企业高效发展

近年来&#xff0c;随着数字化转型的推进&#xff0c;企业对于软件开发的需求日益显著。然而&#xff0c;传统的软件开发模式通常需要耗费大量时间和资源&#xff0c;限制了企业的快速响应能力。为了解决这一难题&#xff0c;低代码开发平台应运而生&#xff0c;成为企业和开发…

【沁恒蓝牙mesh】CH58x串口环形FIFO数据处理

本文章主要针对沁恒科技的CH58x芯片&#xff0c;以 BLE_UART 工程为依托&#xff0c;介绍串口数据的接收与处理。 该工程中 串口数据的处理用到了环形FIFO机制&#xff0c;可作为其他开发工具 &#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我…