Vue报错：Invalid prop: type check failed for prop “roleList“. Expected Object, got Array 解决方法

╰半橙微兮° 2024-03-23 20:41 19阅读 0赞

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！

### 问题描述 ###

在 `Vue` 项目中通过 `Props` 属性向子组件传值的时候，很多小伙伴经常遇到Invalid prop: type check failed for prop “roleList”. Expected Object, got Array 的错误信息  
  
![在这里插入图片描述][7949ea7bdbe74567ab0c83c0febbc97a.png]

先看看父组件和子组件传递的代码，这里注意看两个组件之间通过 `Props` 属性传值所定义的类型  
  
**父组件：**

<template>
      <div class="app-container">
        <add-user-dialog
          :role-list="roleList"
        />
      </div>
    </template>
    export default {
        
      data() {
        
        return {
        
          roleList: [] // 角色列表
        }
      }
    }

**子组件：**

export default {
        
      props: {
        
        roleList: {
        
          type: Object, // 类型
          default: null // 默认值
        }
      }
    }

### 解决方法 ###

根据以上可以看到我们在父组件向子组件传递的 `roleList` 变量的类型是数组，而在子组件中 `roleList` 变量的类型是对象，*所以出现了错误：在子组件中我们的期望是一个对象，而你父组件中给我传递了一个数组*，这就是导致错误的原因，修改 `Props` 属性的 `roleList` 变量的类型和默认值即可

export default {
        
      props: {
        
        roleList: {
        
          type: Array, // 类型
          default: () => [] // 默认值
        }
      }
    }

问题解决，所以大家在写代码的时候特别是传递参数时，注意两边参数定义的类型是否一致！

[7949ea7bdbe74567ab0c83c0febbc97a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b206d8efef6a44318dbd4121446e4b8f.png

Vue报错：Invalid prop: type check failed for prop “roleList“. Expected Object, got Array 解决方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va

相关报错Vue warn]: Invalid prop: type check failed for prop “min“. Expected Number with value 1,

相关 Vue报错：Invalid prop: type check failed for prop “roleList“. Expected Object, got Array 解决方法

相关 vue报错：Invalid prop: type check failed for prop “index“. Expected String with value

相关 Invalid prop: type check failed for prop "radius". Expected Number, got String.

相关日常报错、[Vue warn]: Invalid prop: type check failed for prop "multiple". Expected Boolean, got String.

相关心碎的异常（三）——[Vue warn]: Invalid prop: type check failed for prop “index“. Expected String, got Number.

相关 vue常见错误：Invalid prop: type check failed for prop "data". Expected Array, got Object

相关 Invalid prop: type check failed for prop “value“. Expected String, Number, got Array问题解觉及查找

相关 Invalid prop: type check failed for prop “orderId“. Expected Number with value 572, got String with