Vue组件传参报错：期望Array类型却传入Function的解决咨询

开发者阿泽

2026-5-28

解决Vue Prop类型错误：期望数组却传入函数的问题

看起来你遇到的问题核心是传给ChildTabs组件的form_type prop不是数组，而是函数本身，但根源其实是你的计算属性selectedType存在边界情况未处理，以及一些Vue使用的不规范导致的。让我们一步步解决：

问题分析

你定义的selectedType是计算属性，理论上在模板中直接使用:form_type="selectedType"应该传递它的返回值（数组），但报错显示传入了函数，这大概率是因为当contact_type为空时，你的计算属性抛出了错误，导致Vue无法正确解析出数组值，反而把计算属性的getter函数本身传了过去。

看你的计算属性代码：

selectedType: function () {
  var values = this.contact_types.map(function(o) { return o.value });
  var index = values.indexOf(this.contact_type);
  this.selectedForms = this.contact_types[index].form_type 
  return this.selectedForms;
}

当用户还没选择contact_type时，index会是-1，this.contact_types[index]就是undefined，这时候访问.form_type会抛出Cannot read property 'form_type' of undefined的错误，进而导致计算属性无法返回预期的数组，最终触发prop类型校验失败。

另外，还有两个不规范的地方：

计算属性不应该修改实例属性（this.selectedForms），计算属性应该是纯函数，只负责返回计算结果，不产生副作用。
你在created钩子和提交按钮中调用this.selectedType()，这是没必要的，计算属性会自动响应依赖变化（比如contact_type改变时自动重新计算），不需要手动调用。

修复步骤

1. 修复计算属性的边界处理

修改selectedType，处理contact_type未选择的情况，返回空数组或者默认值，同时去掉不必要的实例属性赋值：

computed: {
  selectedType: function () {
    // 先找到选中的contact_type对象
    const selectedContact = this.contact_types.find(item => item.value === this.contact_type);
    // 如果找到就返回对应的form_type，否则返回空数组
    return selectedContact ? selectedContact.form_type : [];
  }
}

用find方法比map+indexOf更简洁，也能直接拿到目标对象，避免索引越界的问题。

2. 修正模板中的传递方式

确保模板中传递的是计算属性的返回值（现在已经处理了边界情况，始终返回数组）：

<ChildTabs :form_type="selectedType" />

这里不需要加括号，因为计算属性在模板中访问时会自动调用其getter函数并返回结果。

3. 移除不必要的手动调用

删掉created钩子中的this.selectedType();，以及提交按钮的v-on:click="selectedType()"——提交按钮应该处理表单提交逻辑，而不是调用计算属性。可以新增一个提交方法：

methods: {
  handleSubmit() {
    // 这里写你的提交逻辑，比如验证表单、发送请求等
    console.log('提交的表单类型：', this.selectedType);
  }
}

模板中对应修改为：

<q-btn color="green-6" v-on:click="handleSubmit()">Submit</q-btn>

4. （可选）在ChildTabs组件中添加默认值

为了更健壮，你可以在ChildTabs组件的prop定义中给form_type设置默认空数组：

// ChildTabs组件的script部分
props: {
  form_type: {
    type: Array,
    default: () => [] // 注意数组默认值要用函数返回，避免引用共享
  }
}

最终修改后的关键代码片段

父组件的计算属性和模板：

<template>
  <!-- 其他代码不变 -->
  <ChildTabs :form_type="selectedType" />
  <q-field class="float-right">
    <q-btn color="faded" v-on:click="goBack()">Cancel</q-btn>
    <q-btn color="green-6" v-on:click="handleSubmit()">Submit</q-btn>
  </q-field>
  <!-- 其他代码不变 -->
</template>

<script>
// 其他代码不变
computed: {
  selectedType: function () {
    const selectedContact = this.contact_types.find(item => item.value === this.contact_type);
    return selectedContact ? selectedContact.form_type : [];
  }
},
methods: {
  handleSubmit() {
    // 这里写你的提交逻辑，比如验证表单、发送请求等
    console.log('提交的表单类型：', this.selectedType);
  }
},
created: function () {
  // 移除this.selectedType();
}
// 其他代码不变
</script>

这样修改后，selectedType会始终返回数组（未选择时是空数组），就能通过ChildTabs的prop类型校验，报错也就消失了。

内容的提问来源于stack exchange，提问作者Suzed