props传递对象和循环遍历数组对象

于 2024-09-03 23:20:02 发布
阅读量297 收藏
点赞数 11
文章标签： 前端 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_86834756/article/details/141873871
版权

当我们在使用props传递值时如果只有几个还好，一但多了就会显得很麻烦代码也多了这时使用对象存储值，数组存储对象遍历输出更加简洁方便编写，不仅如此还可以对其传入的参数类型进行设定。

1.当我传递一个数值类型的数据时使用前面要加一个冒号，不然默认是字符串

可以看到我们对username的参数类型定义的是String类型，并设置了默认值当我们没有传递参数时默认就是定义的值

这里可以看到控制台在报错它这里说的是username需要的是String类型但是传递了一个number类型的值，这里的就说如果我们指定了类型就应该按照类型来传递否则会报错。

2.当我传递一个对象时的使用方式

这里值得注意的是obj是我们在另一个页面定义的不是随便写的。

当我们传递一个对象的时候类型是Object因为它可能传递任何类型过来，名字跟地址使用的是传递过来的对象内定义的名称不能乱写否则取不到值

3.当我们传递多个对象时

传递多个对象时要用数组存放，然后使用v-for对数组进行遍历将遍历后的item值传递给obj

可以看到我们存放了多少个对象就输出了多少个数据

冬瓜爱编程
关注
  • 11
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数组循环遍历方法总结及区别
zwt_vip的博客
03-28 4079
js数组的遍历方法与函数总结，以及各个方法之间的区别
javaScript遍历对象、数组、类数组总结
wenmin1987的博客
03-03 1020
一、对象直接量的遍历 var o={ a:1, b:2, c:3, d:5 } Object.keys(o) :遍历自己的属性，原型上的和继承过来的都不遍历 Object.keys(o) // ["a", "b", "c", "d"]---输出的是数组key值 delete o.a;//true Object.keys(o) // ["b", "c", "d&quot
使用defineProps在组件中进行传递值，Prop效验和prop默认值用法，循环遍历数组对象
m0_65941214的博客
08-30 584
使用defineProps在组件中进行传递值，Prop效验和prop默认值用法，循环遍历数组对象
vue基础-全选，使用计算属性 和 every遍历数组的返回值 true or false
weixin_44475738的博客
06-18 787
子传父。
【问题总结（20）】如何用forEach遍历数组并格式化数组 arr.push 父子组件通信
weixin_45650440的博客
08-04 566
如何用forEach遍历数组并格式化数组为antd a-select组件接受的数组 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block async getCatList () { // 调用cat接口 const catObj = await getAllCat() const catList = await catObj.result //置空this.catLis
关于数组以及对象一些api的注解和使用
wwqqqq123的博客
11-14 726
数组 arr.join(“连接符”) 作用：用连接符把数组里面的元素连接成字符串； 注意：arr.join("")能无缝连接，即将数组转化为字符串。 arr.concat("a","b",arr1) 作用：进行拼接 注意：Ⅰ不会修改原数组，返回新数组。 Ⅱconcat方法中的数组会被打散为单个元素再拼接。 举例： var arr=['0']; var arrConcat=arr.co...
Vue.js官方文档2----Class 与 Style 绑定、条件渲染（v-if）、列表渲染（v-for遍历数组对象）
long_steve的博客
09-21 1032
在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染。
vue中props的用法
程文英
09-11 8432
vue使用props的用法 日常编程中都会用到父组件用子组件、子用父的情况，下面先介绍一种子传父的情况 1、在父组件中 (1)、首先是在其定义一个list属性以存储其数据值 (2)、定义一个绑定属性“mlist”，以为后续props做铺垫, <template> <div class="hello"> <h2>我是父组件,我需要建立一些参数</h2> <span><mHome :mlist="list"/></
数组与对象的方法（最全）
weixin_44718291的博客
01-19 2417
数组的方法 自身方法 isArray() Array.isArray() 用于确定传递的值是否是一个 Array。 Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray("foobar"); // false Array.isArray(undefined); //...
循环遍历props传递的数据
09-20
循环遍历props传递的数据可以通过使用JavaScript中的map()方法来实现。map()方法可以遍历数组或对象，并且可以在每次循环时对数组或对象的每个元素进行操作。 首先，我们需要在组件中接收传递的props数据，可以通过...
【例0994】cycle objects by layer 循环按层遍历对象
王牌飞行员_里海的博客
06-05 617
cycle objects by layer 循环按层遍历对象》这是一个NX二次开发官方小例子，下面是代码和解析。相较于混乱、未经验证的代码，官方案例能够确保开发者获得准确的开发方法，这些官方示例代码经过严格测试，能够正确地反映出NX软件的功能和API使用方式，有助于开发者系统地掌握NX二次开发技能，提高开发质量和效率。本专栏订阅后是永久阅读的。欢迎一起学习NX二次开发案例，逐步积累宝贵的经验，早日成为行业专家。
vue3父组件循环遍历去调用子组件方法
09-10
在提供的代码示例中，父组件通过v-for指令循环遍历theModel数组，并将每个menuItem传递给子组件my-tree的model属性。同时，父组件通过v-on指令将parentMethod方法绑定到子组件的childMethod事件上，以便在子组件中...
vue项目中循环遍历公共组件，怎么获取公共组件中的数据
05-21
在 Vue 中，可以使用 props 将...在上面的代码中，父组件循环遍历 `MyComponent` 并将 `items` 数组作为 props 传递给每个实例。在子组件中，我们使用 `props` 对象来定义 `items` 数组，并在模板中使用它来显示数据。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 157
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 791
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Window Performance API
Bruce__taotao的博客
08-28 1864
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 358
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
前端的面试题
本人小可爱
08-30 685
【代码】前端的面试题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值