Prop校验与prop默认值应用以及循环遍历数组对象

于 2024-09-01 21:52:46 发布
阅读量178 收藏 1
点赞数 6
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p23gjj/article/details/141788454
版权

由于props有点麻烦,比如:我们如果父级没有传属性名过来,那它就不会输出数据,所以这里我们使用Prop校验来完善实现它

Prop校验:

要声明对 props 的校验，你可以向 defineProps() 宏提供一个带有 props 校验选项的对象

在defineProps方法里面直接传一个对象
记得属性名后面要添加一个对象,对象里定义一个type类型,然后输入你要的类型,比如String类型

属性名后面记得加冒号
 还可以定义一个默认值,这样父级那边没有传属性名过来是,使用默认值
 并且都要用逗号隔开,不然会报错

图片一样的,没传属性名的话,使用默认路径

如果两个一样的子组件都不传属性名时怎么办?

解决方法:

直接在子组件里defineProps声明一个函数(比如:obj)
 如果是字符串的话,可以直接定义一个默认值
 但如果是一个对象数组的话,就需要定义一个函数
 如果有子组件没有传属性名过去的话,就使用obj定义的默认值
 所以对象一定要用default方法传一个默认值过去

记得用return返回值返回

而在父类这边如果没有传obj的时候,就会使用子组件那边obj定义的默认值

prop遍历循环:

p23gjj
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2024HarmonyOS应用开发者高级认证 最新题库第二部分
AAFFSF的博客
08-02 7370
已更新120道单选，76多选，后面同步更新
弹窗里写表单，el-form表单里循环数组，最后进行表单验证
啊哈的博客
08-18 3604
弹窗里写表单，el-form表单里循环数组，最后进行表单验证
vue的组件和prop
weixin_44649210的博客
11-11 232
组件基础 组件的作用 组件是可复用的vue实例，且带有一个名字。 组件就是我们自定义的一个元素 但是要注意的是：必须用在vue的模版中使用 全局组件 全局组件挂载：实例化一个vue对象，建立一个组件，然后挂载 <div id="app"> <hc-c></hc-c> </div> <script> Vue.component('hc-c',{ data(){
Vue3核心源码解析第十二课 Prop的初始化和更新流程
fegus的博客
07-13 1227
前面我们提到过 Vue.js 的核心思想之一是组件化，页面可以由一个个组件构建而成，组件是一种抽象的概念，它是对页面的部分布局和逻辑的封装。为了让组件支持各种丰富的功能，Vue.js 设计了 Props 特性，它允许组件的使用者在外部传递 Props，然后组件内部就可以根据这些 Props 去实现各种各样的功能。为了让你更直观地理解，我们来举个例子，假设有这样一个 BlogPost 组件，它是这样定义的： 然后我们在父组件使用这个 BlogPost 组件的时候，可以给它传递一些 Props 数据： 从最终结
v-for 循环生成多个表单元素 给动态生成的表单元素绑定值并且添加校验规则
workhard0905的博客
12-02 7191
需求：点击新增按钮 能不断生成下级部门，所以我再data中定义了一个变量 subordinateDepartmentNum：0 默认值设置为0 给增加按钮添加点击事件 每点击一次按钮subordinateDepartmentNum加1 // 新增下级部门 addDepartment() { this.subordinateDepartmentNum++; }, 通过v-for循环生成表单 这样就可以生成多个下级部门的表单元素 <div class="ad...
keep-alive v-for为何使用key值 slot插槽和vue及prop验证
m0_56722063的博客
04-19 1302
keep-alive 概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 场景 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，希望列表页面可以保留用户的筛选（或选中）状态。 keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性
uni-app组件与生命周期
2301_80735340的博客
07-21 891
在demo1和demo2中调用这个组件，此时，demo1和demo2的页面是一摸一样的。尝试分别定义这两个页面，组件中有三个区域header、main、footer，我们要定义中间的main，就在main内放入一个标签，然后就可以去demo1和demo2的组件标签中定义，下面是demo1的代码，在组件标签内填写任意内容；接下来，尝试传递对象给组件：首先，要在组件中设置defineProps接受obj，并在template中渲染，然后在页面中script区域定义对象，并在template中调用。
ES6，对象的扩展：对象属性名的两种表示方法、属性的枚举和遍历及规则，super关键字，对象的扩展运算符、链判断运算符、Null判断运算符
zz2230633069的博客
09-09 1143
1.属性名的两种表示方法 （1）简洁表示法 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。简洁表示法的特点是在对象定义中直接使用变量名。 对于属性：变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。 对于方法：可以省略function关键字，方法名即函数名。 注意，简写的方式不能用作构造函数，会报错。 属性的简写 const foo = 'bar'; const baz = {foo}; // 等同于 const baz = {foo: foo};
MyBatis与Spring设置callSettersOnNulls
热门推荐
铁锚的CSDN博客
09-28 4万+
默认情况下,Mybatis对Map的解析生成, 如果值(value)为null的话,那么,key也不会被加入到map中. 于是对Map遍历时,key也遍历不到,因为前端工具的需要,必须有这个key,网上搜索后发现需要设置 callSettersOnNulls 这个属性. ... 因为是企业内网服务器,不能访问 mybatis.org,于是启动出错. 【Mybatis 这个渣渣，在启动时会去获取并校验DTD,目前还不知道在哪里配置让其不进行校验.】 网上搜索半天，没有好的解决办法, 看到有方法说将dtd下载到
2023年前端面试汇总-React
越陌度阡
06-29 793
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
Creator与Laya的Ts和JsTS的版属性声明详解,属性详解，Enum枚举,dataSource组件综合赋值,box容器复杂赋值[子对象的属性名的geChildByName],clip切片动画
qq_42838904的博客
06-19 1619
//0—）TS中实现构造函数 // class person{ // name:string;//属性 // constructor(n:string) // { // this.name=n; // } // run():void { // alert(this.name); // } // } // var p=n...
Python 面向对象进阶
storyfull
10-25 567
文章整理了面向对象的进阶内容，从面向对象的类出发，深入解读类的成员、方法、特殊方法，成员之间的关系；还有面向对象运用场景的相关知识！
（近5w字）面向小白のVue全家桶开发电商管理系统项目总结文档
超逸の学习技术博客
07-05 2343
（近5w字）面向小白のVue全家桶开发电商管理系统项目，挖掘项目亮点，提供学习地址。
前端的面试题
最新发布
本人小可爱
08-30 231
【代码】前端的面试题。
Window Performance API
Bruce__taotao的博客
08-28 1467
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1514
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue ref和reactive区别
灰海
08-25 5819
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 596
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue遍历数组异步请求
09-15
在Vue中遍历数组进行异步请求可以通过多种方式实现。一种常见的方法是使用`for...of`循环和`await`关键字。以下是一个示例代码： ```javascript async fetchDescription(data) { var arr = []; for (const item of data) { var prop = await Description.fetch(item); arr.push(prop.data); } console.log(arr); } ``` 另一种方法是使用`Promise.all()`方法和`map()`函数来并行处理异步请求。以下是一个示例代码： ```javascript async fetchDescription(data) { var promises = data.map(async (item) => { var prop = await Description.fetch(item); return prop.data; }); var arr = await Promise.all(promises); console.log(arr); } ``` 这两种方法都可以遍历数组并异步请求数据，但是第二种方法更适合处理大量异步请求，因为它可以并行处理请求并提高性能。你可以根据具体的需求选择合适的方法。 （引用的代码片段来源：https://segmentfault.com/a/1190000022224202） （引用的代码片段来源：https://www.cnblogs.com/LULULI/p/10831523.html）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值