使用defineProps在组件中进行传递值，Prop效验和prop默认值用法，循环遍历数组对象

已于 2024-08-30 17:52:40 修改
阅读量308 收藏
点赞数 12
文章标签： vue.js 前端
于 2024-08-30 17:37:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65941214/article/details/141720736
版权

是一个新的API

用于在子组件中定义并接收来自父组件的props。这是Vue 3中组件数据传递方式的一种改进，使得props的声明和接收更加直观和明确。

控制台输出值

不能够直接取出来输出

会报错，意思就是说defineProps是需要被定义的

在组件重新赋值需要用computed的原因

如果直接组件里赋值的话会出现警告异常

那么我们就可以使用computed进行计算实现组件内部改变

在页面上对组件的使用

给默认值

设置约束，默认String类型

如果给数值类型会给出警告

给Props赋默认值

使用对象的方式将多个值存起来

单个赋值太繁琐

一个对象设置默认值需要设置函数

遍历循环

使用更加方便，不需要打多个组件一个一个赋值了

高兴蛋炒饭
关注
  • 12
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design of React从入门到开发教程
a_靖的博客
12-04 4059
Ant Design Pro 是一个企业级中后台前端/设计解决方案。 目录： 一：开发前的准备 二：创建页面 三：创建组件并引用 四：封装网络请求和网络请求走向 五：登录流程以及路由权限设置 六：父组件和子组件相互传值和接收 七：for 循环渲染组件 Ant Design Pro 全家桶技术栈： 1.antd 基于 Ant Design 设计体系的 Rea...
Web前端学习笔记
weixin_43487110的博客
09-03 2209
Web前端学习笔记 2020-9-3整理 2019-9月-19学完 作者:小宇 HTML 基础知识 互联网中的三大基石 Html (HyperText Markup Language) 超文件标记语言 Http (HyperText Transfer Protocol)超文本传输协议 Url (Uniform Resource Locator) 统一资源定位符 HTML、CSS、JS之间的关系 如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+C
react-个人笔记
qq_42753091的博客
08-10 211
1. React 基础语法 2.组件(Class) 3.数据效验 4.Hooks(Func) 5.生命周期 6.路由 7.错误边界 8.redux 9.路径请求 10.其他
js+jquery
my java博客园
06-11 475
Jquery: 时间处理 function dataFormatter1(value, row, index){ if(value==null){ return ''; } var newDate = laydate.now(value,'YYYY-MM-DD hh:mm:ss'); //当前年份 var myDate = new Date; var newYear = myDate.getFu...
part1-02笔记
zsnpromsie的博客
06-27 279
* ./header.vue?vue&type=style&index=0&id=59b9e752&lang=less&scoped=true& in ./components/template/header.vue npm install less less-loader --save-dev
php7新特性
php菜鸟见闻录
11-13 150
1， 在调用函数的时候，使用 … 运算符， 将 数组 和 可遍历 对象展开为函数参数。 在其他编程语言，比如 Ruby中，这被称为连接运算符，。 1 2 3 4 5 6 7 8 <?php function add($a, $b, $c) { return $a + $b + $c; } $operators = [2, 3]; echo add(1, ...$operators...
C#代码审计实战+前置知识
热门推荐
赵花花08042的博客
07-01 4万+
C# 基于 C 和 C++ 编程语言，是一个简单的、现代的、通用的、面向对象的编程语言，它是由微软（Microsoft）开发的，由 Ecma 和 ISO 核准认可的。C# 是由 Anders Hejlsberg 和他的团队在 .Net 框架开发期间开发的。C# 是专为公共语言基础结构（CLI）设计的。CLI 由可执行代码和运行时环境组成，允许在不同的计算机平台和体系结构上使用各种高级语言。...
javaWeb核心技术第五篇之jQuery
weixin_30919235的博客
08-17 68
- 概述 - jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合...
Spring MVC学习文档
weixin_47949485的博客
01-04 597
Spring MVC 一，概述 1，为什么学习SpringMVC spring框架已经是java web开发很主流的框架，这个框架有很多优点当然也有它的不足之处，比于之前的servlet，它一定程度上简化了开发人员的工作，使用servlet的话需要每个请求都去在web.xml中配置一个servlet节点，而Spring 中的DispatcherServlet他会拦截所有的请求，进一步去查找有没有合适的处理器，一个前端控制器就可以， SpringMVC官方文档：https://docs.spring.io/
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
3. 在子组件中，修改prop的值应该通过`$emit`触发自定义事件，而不是直接赋值，以遵循最佳实践和避免潜在问题。 总结起来，`sync`修饰符是Vue中处理子组件修改父组件prop的一种有效方法，它通过自定义事件实现了...
Vue组件中prop属性使用说明实例代码详解
08-27
静态的 Prop 属性可以直接在模板中传入值，而动态的 Prop 属性则需要使用 v-bind 指令来传递值。 Prop 属性的命名规则需要注意的是，在 HTML 中，浏览器会把所有大写字符解释为小写字符，因此需要使用 kebab-case ...
vue-prop父组件向子组件进行传值的方法
08-27
在这个例子中，`props`数组包含了`msg`，这意味着子组件`Child`期望接收到一个名为`msg`的属性值。 2. **使用props** 父组件可以将数据绑定到子组件的`props`上。在父组件的模板中，我们可以通过属性绑定（`:msg`...
es6 嵌套数组循环_JS中循环遍历数组的四种方式总结
weixin_28759987的博客
02-01 3430
本文比较并总结遍历数组的四种方式：for 循环：for (let index=0; index < someArray.length; index++) {const elem = someArray[index];// ···}for-in 循环：for (const key in someArray) {console.log(key);}数组方法 .forEach()：someArra...
vue 通过事件的形式调用全局组件
最新发布
liux6687的博客
08-29 487
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue ref和reactive区别
灰海
08-25 2027
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 1141
简述vue3中use方法加载第三方插件原理
如何使用Vue 3和Type Script进行组件化设计
yang295242361的博客
08-27 832
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
Vue：快捷文本
MMF博客园
08-26 771
Vue：快捷文本
使用v-for 循环 数组productInfoLis 中的对象 在elementUI的el-table-column组件下
05-23
可以这样写： ```html <el-table :data="productInfoList"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> <el-table-column prop="description" label="描述"></el-table-column> <el-table-column> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row)">编辑</el-button> <el-button @click="handleDelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> ``` 其中，`productInfoList` 是你的数组名称，`prop` 属性指向对象中的属性名，`label` 属性用于表头的显示，`slot-scope="scope"` 表示作用域插槽，可以访问当前行的数据，`handleEdit` 和 `handleDelete` 是你自己定义的方法，用于处理编辑和删除操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值