Vue3利用父子组件实现字典

子组件

<template><div><el-tag :type="tagType" v-if="tagVisible">{{ tagText }}</el-tag></div>
</template><script setup>
import { defineProps, onMounted, ref } from 'vue'const tagVisible = ref(false);
const tagType = ref("info");
const tagText = ref("");// 定义参数 已经选中的ITEMID
const props = defineProps({dictType: {type: String, //参数类型default: String, //默认值required: true, //是否必须传递},dictValue: {type: String, //参数类型default: String, //默认值required: true, //是否必须传递}
})const lastLogStatusDict = [{dictValue: 0,tagType: "primary",tagText: "运行中"},{dictValue: 1,tagType: "primary",tagText: "运行中"},{dictValue: 2,tagType: "danger",tagText: "异常"}
]// //周期函数
onMounted(() => {//打印父组件传递的值// console.log(props.dictType, 'dictType');// console.log(props.dictValue, 'dictValue');const dictType = props.dictType;const dictValue = props.dictValue;if(dictValue==null){return;}tagVisible.value = true;if(dictType == "lastLogStatus"){tagType.value = lastLogStatusDict[dictValue].tagType;tagText.value = lastLogStatusDict[dictValue].tagText;}})
</script>

父组件

<DictTag dictType="lastLogStatus" :dictValue="scope.row.lastLogStatus"/>import DictTag from '@/components/dict/index.vue'

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

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

相关文章

新手要了解的几种网络请求方式

1、HTTP请求&#xff1a;HTTP是一种应用层协议&#xff0c;常用于Web应用中的数据传输。通过发送HTTP请求&#xff0c;可以使用GET、POST、PUT、DELETE等方法与服务器进行交互。 2、HTTPS请求&#xff1a;HTTPS是在HTTP基础上添加了SSL/TLS加密层的安全传输协议。通过HTTPS发送…

linux docker部署深度学习环境(docker还是conda)

在深度学习中&#xff0c;避免不了在远程服务器上进行模型的训练&#xff0c;如果直接在服务器裸机的基础环境跑显然是不可取的&#xff0c;此时搭建用于模型训练的docker环境显得尤为重要。 在深度学习中&#xff0c;避免不了在远程服务器上进行模型的训练&#xff0c;如果直…

Rabbitmq入门与应用(六)-rabbitmq的消息确认机制

rabbitmq的消息确认机制 确认消息是否发送给交换机 配置 server:port: 11111 spring:rabbitmq:port: 5672host: 192.168.201.81username: adminpassword: 123publisher-confirm-type: correlated编码RabbitTemplate.ConfirmCallback ConfirmCallback 是一个回调接口&#xf…

Python学习笔记——自定义函数(基础知识)

自定义函数非常简洁有效地实现了代码的复用&#xff0c;让程序编写、阅读、测试和修改变得更加容易。 下面记录Python自定义函数的使用。 1、定义函数&#xff1a; def describe_pet(pet_name,animal_typedog):显示宠物的信息print(f"\nI have a {animal_type}.")…

仿12306校招项目-前后端运行

目录 1.git 克隆 2.设置JDK版本 3.sql脚本导入数据 4.启动中间件 5.运行后端 6.运行前端 1.git 克隆 打开 IntelliJ IDEA&#xff0c;菜单栏顶部找到 Git -> Clone 选项。找到 Clone 这个按钮输入 gitgitee.com:nageoffer/12306.git或者https://gitee.com/nageoffer/…

C# CAD交互界面-模态窗体与非模态窗体调用方式

运行环境Visual Studio 2022 c# cad2016 一、模态窗体调用方式&#xff1a; 当一个模态窗体打开时&#xff0c;它会阻塞主窗体的所有输入&#xff0c;直到关闭该模态窗体为止。例如&#xff0c;弹出一个对话框让用户必须完成某些操作后才能继续使用主程序。 [CommandMethod(&q…

C++正则表达式笔记

最近翻了翻正则表达式的一些资料&#xff0c;做个记录。 1、微软官方 <regex> 函数 | Microsoft Learn 2、正则表达式语法简介 正则表达式语法简介 - 简书 3、正则表达式基础语法大全 正则表达式基础语法大全_正则表达式语法大全-CSDN博客 4、练习 &#xff08;1…

HarmonyOS - 实现多设备协同开发实战教程~

前言 现在随着个人设备越来越多&#xff0c;越来越需要多个设备之间相互感知和连接&#xff0c;设备和设备之间可以相互联动&#xff0c;形成互联互通的场景&#xff0c;而搭载HarmonyOS的设备恰好可以满足这一点 。下面通过开发一个HarmonyOS的多端分布式表白应用来实现设备之…

python coding with ChatGPT 打卡第21天| 二叉树:最近公共祖先

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树&#xff1a;翻转…

hope实验室预备役第4次测试题解

目录 1.Foreign Exchange 2.Takahashi Gets Lost 3.Sasha and the Beautiful Array 4.Sasha and the Drawing 5.Sasha and the Casino 6.Only one of two 7.村村通 8.传送门 1.Foreign Exchange 原题链接 Sample 1 InputcopyOutputcopy 4 5 7 0 3 2 2 4 3 5 25 Sample…

如何解决AI场景下的冯诺伊曼陷阱?

既然聊到冯诺伊曼陷阱在AI场景中的解决方案&#xff0c;那咱们就来个脑洞大开的比喻。假设我们正在构建一个超级智能的大脑&#xff08;AI系统&#xff09;&#xff0c;它需要处理海量的学习资料和数据——就像一位知识狂魔每天要消化成吨的信息。 传统的冯诺伊曼架构下&#x…

【AI绘画】Stable Diffusion简介_stable diffusion变现

手把手教你入门绘图超强的AI绘画&#xff0c;用户只需要输入一段图片的文字描述&#xff0c;即可生成精美的绘画。给大家带来了全新保姆级教程资料包 &#xff08;文末可获取&#xff09; Stable Diffusion是2022年发布的深度学习文本到图像生成模型&#xff0c;它主要用于根据…

ncnn之三(补充):window环境下vs2022安装ncnn+protobuf

启动VS2022 下面的 x64 Native Tools Command Prompt for VS2022 protobuf git clone gitgithub.com:protocolbuffers/protobuf.git# 或者 下载 https://github.com/google/protobuf/archive/v3.11.2.zip cmake -G"NMake Makefiles" -DCMAKE_BUILD_TYPERelease -D…

HTML的特殊字符

HTML的特殊字符 有些特殊的字符在 html 文件中是不能直接表示的&#xff0c;例如: 空格&#xff0c;小于号(<)&#xff0c;大于号(>)&#xff0c;按位与(&)。 空格 示例代码&#xff1a; 运行结果&#xff1a; 由于html 标签就是用 < > 表示的&#xff0…

【快速搞定Webpack5】修改输出文件目录及自动清理上次打包文件(五)

介绍 默认情况下webpack打包后&#xff0c;我们的图片和js等文件都会被打包到dist目录下&#xff0c;文件多了混淆在一起一方面不利于文件的查找和管理&#xff0c;另外一方面看上去也不美观。 所以今天我们学习的内容就是控制输出后的文件进入不同的目录。 一、配置 新增4…

Java根据byte[]内容获取文件类型

输出啊 1、添加pom依赖 <properties><java.version>1.8</java.version><tika.version>1.26</tika.version><jmimemagic.version>0.1.5</jmimemagic.version></properties> <!-- 文件类型检测 --><dependency…

cpptrace 库介绍

cpptrace 是一个C 开源库&#xff0c; 简单试了下&#xff0c;我的发现和结论&#xff1a; 还不能通过 brew install 安装最方便方式仍然是 git clone 源码后&#xff0c; CMakeLists.txt 里&#xff0c; add_subdirectory() 方式使用: add_subdirectory("/path/to/cppt…

BioTech - 大型蛋白质复合物的组装流程 (CombFold)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/136187314 CombFold是用于预测大型蛋白质复合物结构的组合和分层组装算法&#xff0c;利用AlphaFold2预测的亚基之间的成对相互作用。CombFold的组…

MES系统的功能有哪些?

阅读本文&#xff0c;你将了解&#xff1a;一、MES系统是什么&#xff1b;二、MES系统的功能&#xff1b;三、MES系统的使用场景与案例分析&#xff1b;四、如何更高效地利用MES系统。 这是我们公司正在使用的MES系统&#xff0c;已为大家搭建好模板了&#xff0c;无需下载&…

日常问题:解决远程服务调用后采用fastjson进行类型字段转换大小写匹配问题

摘要 在使用 JSON 序列化工具时。或者是通过远程服务调用的过程中接收到其他服务的响应体时&#xff0c;我们常常遇到一个问题&#xff1a;默认情况下&#xff0c;字段的首字母会被转换成小写。但在某些场景下&#xff0c;我们需要返回的 JSON 格式的参数字段首字母保持大写。本…