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

最新推荐文章于 2024-06-22 22:30:00 发布
最新推荐文章于 2024-06-22 22:30:00 发布
阅读量6.4k 收藏 2
点赞数 3
分类专栏： vue3 工作中遇到的问题 ts 文章标签： 前端 javascript vue.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44016350/article/details/128292338
版权

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

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

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

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

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

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

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

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

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

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

 

橙子将军
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue props type设置多个类型，默认值
King Saj
08-30 1万+
vue组件props不同数据类型传参的默认值
Vue3【组件传递（数据_Props、多种数据类型、Props效验 ）组件事件(配合 v-model 使用 、组件数据传递、透传 Attribute) 】(四)-全面详解（学习总结---从入门到深化）
03-26 808
Vue3【组件传递（数据_Props、多种数据类型、Props效验 ）组件事件(配合 v-model 使用 、组件数据传递、透传 Attribute) 】(四)-全面详解（学习总结---从入门到深化）
【vue3|第12期】Vue3的Props详解：组件通信
最新发布
Commas的博客
06-22 1426
在 Vue.js 的世界中，组件是构建用户界面的基本单元。为了实现组件之间的数据传递和交互，Vue 提供了一种强大的机制——props（属性）。本篇博客旨在为 Vue3 的新手宝宝们详细解读 props 的概念、定义方法、作用以及应用场景，帮助大家快速掌握并运用 props 来构建灵活且可复用的组件。
Vue3中props传参（多种数据类型传参方式）
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-29 1万+
`props`的参数： type: 数据类型 default： 默认值 required： 是否必传, true必传，false 非必传
vue props 多类型
qq_36825145的博客
07-11 4743
propC是必须传入的且类型必须为String或Number。propD的类型可以是Object或Array类型，如果没有传值，则默认为一个空数组。在给这些属性设置值时，它们可以是字符串或数字类型。也可以通过type属性来指定属性的类型。除了常见的使用props属性来设置值之外，Vue还提供了props多类型支持，这意味着在设置props时，可以定义多种类型，从而为组件开发提供更大的灵活性。在Vue中，props是一种使用场景广泛的属性。它可以让子组件接收父组件传递的值，从而实现组件之间的通讯。
vue2 props 属性值接受多个类型
热门推荐
我有一个梦想的专栏
03-20 3万+
originalData: { type: Array | Object, default () { return [] } } } ```
vue3 props 如何接受多个类型?
韩旭的博客
08-23 6624
采用vue2写法，编辑器报错 vue3 变更为数组写法
vue props 一次传多个值实例
10-15
这篇文章主要讲述了如何在Vue中通过props一次性传递多个值给子组件的实例，并提供了一些实例代码供读者参考。 首先，了解props的基本概念是学习如何一次性传递多个值的前提。在Vue组件中，props是父组件传递数据给...
awesome-vue-3：与Vue 3相关的精选精彩清单
02-06
5. **Fragment和Template Props**：Vue 3 支持了片段(Fragment)组件，允许组件返回多个根元素。同时，新增了模板(props)功能，允许组件接收完整的HTML模板作为prop，增强了组件的灵活性。 6. **TypeScript支持**：...
vue3-2个多小时的学习.docx
03-09
在这个文档中，作者通过2个多小时的学习，为我们整理了Vue3的一些关键概念和实践技巧。 首先，Vue3 引入了两种新的响应式数据定义方式：`ref` 和 `reactive`。`ref` 用于创建一个可响应的引用对象，其值可以被直接...
vue3-mindmap:开发中
04-09
vue3-mindmap（开发中） 相比更新了技术栈：Vue3、d3v6、Vite 目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v...
详解Vue内部怎样处理props选项的多种写法
10-17
主要介绍了详解Vue内部怎样处理props选项的多种写法，详细的介绍了props的使用的写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-types:查看道具类型定义
07-24
Vue 类型 Prop 类型定义。 注意：本文档适用于 VueTypes 4。如果您正在寻找旧版本，请参阅v1~v3分支。 介绍 vue-types是 Vue.js 组件的可配置定义的集合，受 React 的prop-types启发。 或在了解更多。 运行示例 ...
Vue3 Props
weixin_52126276的博客
06-05 277
将一个对象中的所有属性都当作 prop 传入 等同于 prop 校验 当传递布尔类型时： 等同于： 前提是在 中显式声明为布尔类型
vue props 的多种用法
拿回忆下酒
06-20 1168
父组件调用子组件时，我们经常用到 props，但是写法却五花八门，这里我们结合Vue 的官方文档一起学习一下，(这里我们举例String、Number、Array，Object) prop类型 父组件的信息如下 <template> <section class="wrap"> <children-box :name="name" :age="age" :toysList="toysList" :detailObj="detailObj"></children
vue props 属性值接受多个类型
weixin_34403976的博客
09-08 9538
vue props 属性值接受多个类型 直接上代码： someData: { type: Array | Object, default () { return [] } } ... 如果我们自己写不限制类型的props，可以使用数组的形式 props:['someData'] 但是有时我们做已经搭好的框架， 里面组件比较成熟都能直接用， 但是发现别人写的组件里限制了类型， 这时候我们由于业务需求想扩展组件功能增加一些类型， 这时我们就需要用到第一种方法了 希望这篇帖子能帮到你！ ...
vue props 设置属性值常见类型（多类型）
爱尚丽明的博客
09-22 820
vue props常见属性值类型，多类型
vue3组件内侦听多个props变化
thingir的博客
01-24 2567
侦听reactive用() => prop.name 侦听多个用数组() => [props.name, props.id ] setup(props, context) { watch(()=> [props.pid, props.pname], (newValue, oldValue) => { console.log(`原值为${oldValue}`) // 原值为7,同城 console.log(`新值为${newValue}`) // 新值为1,汽.
Vue3的Props
一个努力不被优化的程序员
02-01 3930
因为在编译时整个表达式都会被移到外部的函数中。一些补充细节：所有 prop 默认都是可选的，除非声明了。
vue3如何声明接收props参数的类型
07-27
在 Vue 3 中，可以使用 TypeScript 或者 PropTypes 来声明接收 props 参数的类型。 如果你使用 TypeScript，可以通过在组件的 `props` 选项中声明类型来指定 props 的类型。例如： ```typescript import { defineComponent } from 'vue'; export default defineComponent({ props: { name: { type: String, required: true }, age: { type: Number, default: 18 } }, setup(props) { // 使用 props.name 和 props.age // ... } }); ``` 如果你使用 PropTypes，可以通过在组件中导入 `vue` 和 `vue-property-decorator` 库，并使用装饰器 `@Prop` 来声明 props 的类型。例如： ```typescript import { Vue, Prop } from 'vue-property-decorator'; import { Component } from 'vue'; @Component export default class MyComponent extends Vue { @Prop({ type: String, required: true }) name!: string; @Prop({ type: Number, default: 18 }) age!: number; // ... } ``` 无论使用 TypeScript 还是 PropTypes，都可以通过给 props 添加类型和其他属性来定义其类型、是否必需以及默认值等信息。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值