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

最新推荐文章于 2024-12-31 16:46:54 发布
最新推荐文章于 2024-12-31 16:46:54 发布
阅读量401 收藏 4
点赞数 10
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/p23gjj/article/details/141788454
版权

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

Prop校验:

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

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

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

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

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

解决方法:

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

记得用return返回值返回

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

prop遍历循环:

前端面试汇总-React
越陌度阡
06-29 1227
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
form-render库点击“新增一条”无法通过数据校验的bug｜通用watch监听器
Galaxylu的博客
12-09 333
项目使用了form-render这个低代码库，因为需要有很多不同的配置页面（表单详情页），为了动态生成，节约开发成本，选择了这个库，通过从后端拿到schema配合自定义的widget实现了动态化的表单页面。在具体的详情页中一共有三个tab页，表单编辑模式（各种嵌套的输入框）+json编辑模式（就是json）+schema生成器（fr-generator这个表单设计器），问题就出在了表单编辑模式上。当新增一条数据时，明明已经填写了所有必选项但是还是无法通过表单校验。
第二十一章 Vue组件通信之prop校验及单向数据流
Calvin的博客
10-30 728
在上一个章节中，我们讲解了组件之间的关系以及组件之间父子通信的解决方案，其中就提到了props的概念，父子关系可以通过props进行通信。那么什么是Prop呢？Prop其实是组件上注册的一些自定义属性，它可以用来向子组件传递数据。Prop的特点：1. 可以传递任意数量的prop2. 可以传递任意类型的prop。
Vue Prop
象在舞的技术专栏
08-28 832
本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue》中，欢迎大家关注~ 一、Prop的大小写 HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当使用 DOM 中的模板时，camelCase (驼峰...
vue中props设置默认值
cecoal的博客
07-28 1万+
但是，如果初始化的时候就使用里面的值，可能会出现没有该值的情况，此时就会报错。应该使用以下有默认值的写法。
Prop效验与Prop默认值用法及循环遍历数组
ou050719的博客
09-01 574
在HBuilderX里面你把组件传过去,向之前的那样的写法是没有默认值的,写了才有值,否则为空,所以我们可以用另一种方法,写法如下。虽然这样写了但是不是完全体的,我们可以给他定个默认值和类型,就像那个String一样,可以约束对象只能是这个的类型。这样子另一个页面使用的时候如果不写username的话就会显示默认值也就是'朵拉'还可以把里面的username和imager写到一个对象里面,如下。这样就是Prop遍历数组,还可以添加默认值如下。在另一边为空的时候就是用这个默认定义的。在另一个页面使用就是。
校验vue prop的几种方式
qq_42880714的博客
08-11 2622
校验vue prop的几种方式
error in mounted hook: please transfer a valid prop path to form item!
12-31
针对动态生成的内容，特别是循环遍历列表的情况，应按照索引位置精确指明每个输入控件对应的属性路径。 ```html <!-- 使用计算后的完整路径 --> <el-form-item :prop="'list.' + index + '.property'" ... > ... ...
iview 清除部分表单的数据和校验结果
01-13
遍历此数组找到目标字段实例后调用其内部的 resetField 或 clearError 方法来单独处理所需字段。 ```javascript // 假设要清除名为 'username' 和 'email' 的两个字段 let fields = this.$refs['form'].fields; for...
增加需求，el-form-item默认有个label值，hiddenFields改为对象数组，结构为 [{show:true, label:'测试'}]，当show为false是代表要隐藏当前的el-form-item，且当label有值是代表要修改当前项目的label，如何第一种v-if的方案进行改进
最新发布
04-03
假设用户是在循环渲染表单项，那么可以用v-for遍历表单字段数组，同时用索引来对应hiddenFields的项。例如： v-for="(field, index) in fields" :key="index" :label="hiddenFields[index].label || field....
Vue Prop 默认值深入解析：工厂函数与 rawProps 的正确使用
parade岁月的博客
12-31 1266
在 Vue.js 中，prop是组件接收外部数据的重要方式。我们常常为组件的prop设置默认值，确保在父组件没有传递值时，组件能正常工作。默认值可以是基本类型，也可以是对象、数组或函数。然而，很多开发者可能会在设置对象和函数类型的prop默认值时感到困惑。今天，我们就来深入探讨如何正确使用 Vue 中的default和rawProps，并通过实际案例让你更加清晰地理解这些概念。
vue中的prop
m0_62351100的博客
02-22 1万+
prop prop一般用于父组件向子组件进行单向通信（父向子传值），传递的可以是一个对象，也可以是一个数组。 prop是数组的话会有默认的数据类型， 是对象的话可以设置数据类型，是否必传等 prop 是在父传子时形成一个单向下行绑定，意思是父级的更新会向下流动到子组件中，但是反过来则不行。 每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。 props验证 <test-prop-validate :prop-a="1" :pro
vue的props
我的博客简介
12-07 199
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
props数据验证
王工头的博客
05-01 1421
欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 文章目录1 前言2 示例 1 前言 组件props选项的值可以为为数组类型,也可以是对象类型 props选项的对象类型可以用于对外部传递进来的参数进行数据验证 比如某个数据必须是数字类型，如果传入字符串，就需要在控制台弹出警告 2 示例 Vue.component('my-comp...
vue2动态表单的 prop校验 多层数据结构
2301_76607997的博客
04-11 878
data里面的数据是这样的data：{form：{extraList:[ { tables: [] } ] } } 动态表单校验。这是部分代码 最下面是完整代码 表单里嵌套表格 可以新增每个表格。我这里用了Collapse 折叠面板--
vue的props传数组_详解vue.js之props传递参数
weixin_42501298的博客
01-16 1万+
本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法，以下是全部内容。前段时间用vue做一个后台管理系统，其中每一页都需要一个表格来展示信息。自然就想到了将表格提取出来做成公共组件，将不同页面的数据传入进行渲染，达到复用的目的。demo地址1. 问题发现在父组件中，需要向表格组件传递的数据有表格的内容数据tableData，表格的页面数据page。其中table...
vue中prop的用法
热门推荐
风如也的博客
07-23 2万+
prop的大小写 HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase（驼峰命名法）的 prop 名需要使用其等价的 kebab-case（短横线分隔命名）。如果使用字符串模板，这个限制就不存在了。 prop类型 我们常见的 prop 是以字符串数组形式列出的 prop props: ['title', 'likes', 'isActived'] 但是，通常你也希望每个 prop 都有指定的值类型，这个时
react——子组件props字段类型类型限制——默认值设置。
阿牛哥的博客
09-20 1751
react——子组件props字段类型类型限制——默认值设置。
prop 验证，和默认值
weixin_44190647的博客
09-14 685
prop 验证，和默认值 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。 有两
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值