Vue3: vue3 props接多个不同类型的参数,默认false

news2024/11/18 23:27:16

哪天的问题来着...嘶...(挠头)...

之所以会卡在这里,是因为在我的经验及认知里,封装组件中props的使用,接参时从来都是一个参数对应一个值,尤其是在ts中,还更为严格地设定了参数类型,所以我的业务需求不知道怎么实现了(这段话讲的比较乱,不知道怎么描述更合适,还是直接上图吧...)

如图为vue3封装组件中,props接参大部分的写法展示

 在上图中,如果你参数的type设置为boolean,那你就无法传入其他类型的值,比如说string或者number等等。但我的业务场景是,需要设置一个参数,平时用不上,只有传入参数的时候才起作用

最开始我是这样写的(如图):

但是紧接着就发现,默认是要它不显示,如果它默认为0的话,还是会显示的,所以只好再传入一个判断是否需要旋转的参数(如图):

 哎...这次果然不出意料的成功了,但是回头看看代码,感觉还是太冗余了,有没有办法能让它一个参数搞定呢?百度查了半天依然没查到想要的结果,于是又去请教公司大佬,大佬想了想(因为很少用),告诉了我一个方案,也就是最终采用的结果,如图:

 解释一下我的理解,vue3中封装组件props接参,其type可以设置多个类型(目前只试了两个,两个以上还没有过尝试),也就是该参数允许传入多个不同类型的参数。这里注意哈,是多个不同类型的参数,不是多个参数,参数的数量仍然是1,别搞混了。

拿上图对照一下我的业务场景,或许能让你更加理解

设置一个参数,平时用不上(default: false),只有传入参数的时候才用(传入的参数支持Number属性)

 

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

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

相关文章

保姆级教程!如何在安卓手机上安装使用油猴脚本

浏览器插件成千上万,但是大家都有一个共识,那就是油猴无插件能敌,原因就在于它一个插件就可以实现众多插件的功能。 首先需要明确一点的是,油猴插件本身是没有任何功能的,它需要依靠脚本来实现功能。至于脚本&#xf…

红队web打点信息收集

目录 红蓝对抗 ICP备案查询—查询主域 主站域名一键查询 敏感信息收集 googlehack语法 目标邮箱号收集 子域名收集 被动信息收集 证书透明 fofa_viewer 在线子域名查询 第三方DNS服务 google语法 主动信息收集 oneforall Sylas—从burp历史记录中提取子域 Lay…

【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件

目录 前言 初识express 使用express创建基本的web服务器 初识express路由 路由匹配概念 路由模块化 中间件 中间件和路由的区别 定义中间件函数 中间件作用 局部生效中间价 中间件分类 1.应用级别中间件 2.路由级别的中间件 3.错误级别中间件 4.内置中间件 5.自定义…

带你深入理解js事件循环机制

同步任务和异步任务(微任务和宏任务) JavaScript是一门单线程语言 分为同步任务和异步任务 同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务。 异步任务指的是,不进入主线程…

Pro1:图片的隐藏和显示

什么是JavaScript?实现目标实现代码实现效果实现方法💛作者主页:静Yu 🧡简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者 💛社区地址:前端知识交…

axios 中如何取消请求_从不会使用到精通原理_番茄出品

start 最近频繁遇到一个问题,axios 是如何取消请求的?这篇文章将从新手小白的视角出发,从 axios 取消逻辑的基础使用,到原理分析,带你彻底了解并掌握 axios 中取消请求的“秘密”。编写时间:2023/02/24-23…

520到了,教你做个JavaWeb表白墙小项目

目录 1.配置 Maven 项目 1.1 创建 Maven 项目 1.2 引入相关依赖 1.3 项目总结构 2. 约定前后端交互接口 3.服务端代码 3.1 创建Message类 3.2 创建工具类 3.3 添加信息类(AddMessage) 3.4 查询信息类(MessageList) 4. …

vue3中的配置代理

如图,配置代理就是在客户端与服务器中充当中介的角色 目录 关于配置代理,首先我们的要知道为什么要配置代理,配置代理做了什么事情 一、跨域是什么 二、如何解决 三、配置代理案例 1. 下面是我自己在后端尝试解决跨域的例子 2.然后在vue中…

【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

Vue实战笔记目录前言一、ref修改样式1、通过 Vue 的 ref 组件获取 DOM 元素节点注:这边比较一下,和 DOM操作 document.getElementById(id) 这个方法有什么区别2、通过 ref 修改 DOM 元素节点样式二、通过v-bind对Html元素的样式(style)进行动态绑定三、v…

端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

效果 源码 源码太多,放github上了点击 遇到的问题 连接mongodb数据库多个集合(model文件) mongodb与mysql数据库连接不同,sql在定义查询语句时可以连接不同的表mongodb需要在开始定义好连接要用到的表 module.exports {dbPr…

echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

基本使用方法 echarts-wordcloud是基于echarts的一个词云库,是我常用的一个组件,业务上用的多一点,但是这个库在echarts的官网文档里面没有说明,git上的说明也很少,有些配置需要自己摸索,下面都是我的血泪…

css动画效果

动画1&#xff08;沿着椭圆转动&#xff09; 其实是个2D转动&#xff0c;只不过咱们设置椭圆&#xff0c;然后加上scale缩放&#xff08;近大远小&#xff09;&#xff0c;看上去就是3D效果 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head…

使用Node.js手撸一个建静态Web服务器,内部CV指南

文章里有全部代码&#xff0c;也可以积分下载操作步骤如上图文章结束 话说这个键盘真漂亮~~ 文章目录使用Node.js手撸一个建静态Web服务器一、动静态服务器的概念1.1 静态Web服务器概念1.2 静态Web服务器的优点1.3 快速搭建的途径二、 手撸指南2.1 框架搭建2.2 CtrlC/V2.3 启动…

Vue使用ElementUI对table的指定列进行合算

前言 最近有一个想法&#xff0c;就是记录自己花销的时候&#xff0c;table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。 然后我就顺着elementui的table组件寻找相关的demo&#xff0c;还真发现了一个这样的demo。 对于这个demo&#xff0c;官方…

css实现轮播图

轮播图&#xff1a;就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 轮播图的实现代码&#xff1a; 1&#xff09;创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致&#xff0c…

npm i 安装不上依赖怎么办

起因 在github上下载的项目需要使用npm i来安装依赖。但是安装过程需要很久&#xff0c;然后安装完了又发现安装过程报错了。导致项目跑不起来。原因是某些依赖没有成功的安装上去 解决办法&#xff08;依次试&#xff0c;每次试新的命令最好把上次安装node_modules删掉&#…

threejs三维地图大屏项目分享

这是最近公司的一个项目。客户的需求是基于总公司和子公司的数据&#xff0c;开发一个数据展示大屏。 大屏两边都是一些图表展示数据&#xff0c;中间部分是一个三维中国地图&#xff0c;点击中国地图的某个省份&#xff0c;可以下钻到省份地图的展示。 地图上&#xff0c;会做…

(Select)解决:Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)

Ⅰ、Element-ui 提供的组件与想要目标情况的对比&#xff1a; 1、Element-ui 提供组件情况&#xff1a; 其一、Element-ui 自提供的代码情况为(示例的代码)&#xff1a; // Element-ui 自提供的代码&#xff1a; <template><el-select v-model"value" pla…

JS对象详解

JS对象详解 js的对象是什么&#xff1f;js的对象类型有哪些&#xff1f;具体实例是什么&#xff1f; 一、ECMA-262对JS对象的定义&#xff1a; 属性的无序集合&#xff0c;每个属性存放一个原始值、对象或函数&#xff1b; 对象是无特定顺序的值的数组&#xff1b; 对象是一…

用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

目录 一、写在前面 二、效果图 三、实现思路 四、实现代码 1、login总界面 2、registercheck总代码 3、logoutcheck总代码 4、amendcheck总代码 相关文章 jsp实现简单登入注册界面功能用jsp实现简单登入注册界面功能&#xff08;css美化&#xff09;&#xff08;软件i…