Note: This blog is written word by word by the blogger, which is not easy. Please respect the originality, thank you all!
Problem Description
When passing values to subcomponents through attributes in Vue projects, many friends often encounterInvalid prop: type check failed for prop “roleList”. Expected Object, got Array error messageProps
First look at the code passed by the parent component and the child component. Here, pay attention to the types defined between the two components through the Props attribute value transfer
Parent component:
<template>
<div class="app-container">
<add-user-dialog
:role-list="roleList"
/>
</div>
</template>
export default {
data() {
return {
roleList: [] // 角色列表
}
}
}
Subassembly:
export default {
props: {
roleList: {
type: Object, // 类型
default: null // 默认值
}
}
}
Solution
Based on the above, we can see that the type of the variableroleList we pass from the parent component to the child component is an array, while in the child componentroleList the variable The type is an object,so an error occurred:In the child component, our expectation is an object, but your parent component passed me an array< /span>Props attributeroleList variable of the , this is the cause of the error, just modify the type and default value of the
export default {
props: {
roleList: {
type: Array, // 类型
default: () => [] // 默认值
}
}
}
Problem solved, so when writing code, especially when passing parameters, pay attention to whether the types defined by the parameters on both sides are consistent!