VUE- 父组件传递子组件props数据类型错误解决

最新推荐文章于 2024-07-08 09:29:52 发布
最新推荐文章于 2024-07-08 09:29:52 发布
阅读量2.3k 收藏
点赞数
分类专栏： vue使用笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41735632/article/details/113742471
版权

问题提示:nvalid prop: type check failed for prop “goodsItem”. Expected Array, got Object
原因：子组件props 接收数据格式错误
在这里插入图片描述
获取的数据详情：↓
在这里插入图片描述
在这里插入图片描述
先思考网络请求的数据是对象还是数组格式，我这里本来是 变量为zongti的对象格式，但是我读取数据的时候专门把zongti提出来了就变成了数组格式。
所以子组件应为：数组格式
在这里插入图片描述
总结：出现这种错误 只要去找上一级数据来源，判断数据是什么类型，修改子组件接收类型就可以解决。

撸串吴先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在ts中item[key]类型报错应该怎么给对类型
cautionHua的博客
12-16 3264
在使用ts的过程中，遇到一个类型报错的问题，特地过来记录一下，既然使用了ts就尽量不使用any这个类型，遇到问题解决问题才能成长。 // keyof关键字可以获取到某一种类型的所有键值，并返回联合类型 for(let key in newData[0]){ type keys = keyof investCategoryResponseType; newData.map((item: investCategoryResponseType) => item[key as keys]); } ..
vue3中v-for报错 ‘item‘ is of type ‘unknown‘
找师父的小白的博客
11-22 957
以为没有显示的表示出list中item的类型，可以使用一下方式。我是直接在props接收的时候改的(如有错误请指正)
Vue.js 中 Prop 如何指定其类型要求
最新发布
My_wife_QBL的博客
07-08 719
Prop 类型是指定组件接收数据类型的规则。通过在组件定义中声明 Prop 的类型，Vue 可以在开发和编译阶段进行类型检查，从而提前发现和解决潜在的问题。StringNumberBooleanArrayObjectDateFunctionSymbol自定义类型：通过构造函数或自定义验证函数定义的类型除了基本类型外，Vue 还支持通过构造函数或自定义验证函数定义自定义类型。在上述示例中，user被指定为User类型，Vue 会检查传递给user。
js判断数据类型
weixin_45672865的博客
08-29 449
js判断数据类型typeofinstanceofObject.prototype.toString typeof typeof 1 // number typeof '2' // string typeof true // boolean typeof undefined // undefined typeof null /
typescript报错汇总（持续整理中）
牛先森家的博客
07-07 2113
typescript报错汇总（持续整理中）
vue 父组件向子组件通过props传递不同数据类型的问题
BIlly Feng的博客
07-24 1896
父组件代码 <template> <div> <item1 :test="{test:1}"></item1> //<item1 :test="[1]"></item1> //<item1 :test="'str'"></item1> </div> </template>
vue父组件向子组件(props)传递数据的方法
11-29
总结来说，Vue中的`props`是父组件向子组件传递数据的基础方式，它使得组件之间的数据流动变得清晰且可控。在实际开发中，根据具体需求选择合适的组件通信方法是至关重要的。了解并熟练掌握这些技巧，将有助于提升...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
那么，父组件是使用 props 传递数据给子组件，但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。 在父组件中定义两个变量，动态绑定到子组件中： 子组件： ``` <!-- 子组件模板 --> ...
vue的props实现子组件随父组件一起变化
09-01
在组件之间传递数据是常见的需求，而`props`就是Vue中用于从父组件向子组件传递数据的主要机制。本篇将详细介绍如何通过`props`实现子组件随父组件一起变化。 首先，让我们理解什么是`props`。`props`（Properties...
vue-prop父组件向子组件进行传值的方法
08-27
Vue还提供了一种方法来验证`props`的数据类型，确保父组件传递的数据符合预期： ```javascript // child.vue export default { props: { msg: { type: String, required: true } } } ``` 在这里，...
vue父组件向子组件传递多个数据的实例
08-27
在 Vue 中，父组件向子组件传递多个数据是非常常见的场景。本文将通过一个实例，讲解如何在 Vue 中实现父组件向子组件传递多个数据。 首先，我们需要了解在 Vue 中传递数据的两种方式：静态数据传递和动态数据传递...
vue父子组件传值
qq_44880532的博客
04-12 150
Vue父子组建之间的传值： 1 父组件向子组件传值 父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。 在父组件中引入子组件； 并在components中注册子组件； 通过属性向子组件中传值 template> <div> <!-- 使用子组件，通过属性向子组件传值，可以是任意值，方法，甚至是父组件对象this -->
react——子组件props字段类型类型限制——默认值设置。
阿牛哥的博客
09-20 1634
react——子组件props字段类型类型限制——默认值设置。
vue自定义组件传参无效，报错为参数未定义
sinat_36227086的博客
08-21 3794
原因：应该是props而不是prop 即： export default { name: "searchTable", props: { tableData: { type: Array, default: [], desc: "动态表格数据", }, tableHeader: { type: Array, default: [], desc: "动态表头", }, }, data() {
vue3类型推断有误，即props类型定义设置require:true，但使用时，仍然显示类型可为undefined
搞毛线的工程师
11-09 5611
const propsType = { age: { type: Number, required: true } } export default deineComponent({ name: 'HelloWorld', props: PropsType, mounted() { this.age // 类型为number || undefined } }) 解决方法：在定义props类型后加上as const const propsType = { age: { ty.
vue props 默认值_学习 vue 的组件 props 数据类型的验证功能【17】
weixin_39611275的博客
12-12 304
学习要点：1.props 验证本节课我们来开始学习 Vue 的组件 props 数据类型的验证功能。一． props 验证1. 之前 props 选项通信采用的是数组方式，其实还有第二种方式：对象；Sting|Number|Boolean|Function|Object|Array | Symbol2. 通过对象模式进行传递数据，可以对数据类型进行验证，支持的类似有：...
验证 Vue Props 类型，你这几种方式你可能还没试用过
粉丝们务必加入微信粉丝群
08-30 1102
随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。作者：Fotis Adamakis 译者：前端小智 来源：mediun原文：https://fadamakis.mdium.com/validating-yur-vue-props-like-a-pro-5a2d0ed2b2d6。...
3分钟了解 vue props type类型
web_ding的博客
10-08 1万+
用了很久的vue，有时候总觉得props type类型，总是有点模棱两可，今天来好好的盘盘他 props介绍： 都知道props是用来父给子传值的（单向的）,HTML 中的 attribute 名是大小写不敏感的，这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名 props类型： props type使用的目的，有点像typescript那种类型检查，type的类型有如下几种， ...
关于Vue中props的详解
热门推荐
jingtian678的博客
07-23 13万+
看一下官方文档： 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。 也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是： 一个组件可以直接在模板里面渲染data里面的数据（双大括号）。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据，那么就在...
vue父组件向子组件传递数据？
05-13
在 Vue.js 中，我们可以通过 props 将数据从父组件传递给子组件。 在组件中，我们可以声明一个属性并将它绑定到子组件上。例如： ```html <child-component :message="hello"></child-component> import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值