一、问题背景

在项目中，我将一个查询销售成本的逻辑从父组件拆分到子组件中。
子组件通过 this.$emit() 将查询结果发送给父组件，父组件在回调函数中进行统计合计。

导致计算总金额失败,如下图：

错误原因分析：本次报错本质是 父组件与子组件通信的数据结构不一致，简单的理解是数据不匹配多嵌套了一层不是我需要的格式。

二、错误发生在父组件：

这是子组件传递的数据

也就是说父组件收到的是这种类型不是数组，reduce 只能作用于数组，因此对对象调用 reduce 就会报：TypeError: list.reduce is not a function

{
  list: [...]
}

三、解决方案

解决方式有两种，任选其一即可 改变子组件传递的格式 或者改变父组件接受的方式
1.子组件直接 emit 数组

2.修改父组件方法：

四、为什么拆分组件后更容易出现这个问题？

因为在父组件与子组件通信时，最常犯的错误就是：

✔ 子组件发送 { list }
✘ 父组件当成 list 来用

结构不一致就会造成 reduce is not a function 这种类型错误。

五、总结

本次报错本质是 父组件与子组件通信的数据结构不一致。

• 子组件 emit 了一个对象 { list: [...] }

• 父组件却把它当成数组来 reduce

• 导致 TypeError: list.reduce is not a function

解决方式也非常简单：

• 要么父组件正确解构

• 要么子组件 emit 原始数组

这个问题在 Vue 开发中非常常见，也很容易忽视，希望本文能帮助你快速定位类似错误。