Vue 子组件如何接收父组件传递的 Map 变量？

如何向 Vue 子组件传递 Map 变量

在 Vue 中，父组件可以通过 props 向子组件传递数据。但是，当要传递一个 Map 类型的变量时，可能会遇到报错。

问题表现：

• 赋值：

  data() {
    return {
      roomPictureList: new Map()
    }
  }

• 传递： 将 roomPictureList 通过 props 传递给子组件

• 控制台报错：

  TypeError: Supplied property "roomPictureList" was not valid. Vue received a value that was not compatible with the expected prop type: Map.

解决方案：

问题出在 roomPictureList 的初始值是一个空对象。为了解决这个问题，可以将其改成 null：

data() {
  return {
    roomPictureList: null
  }
}

这样，在传递给子组件时，Vue 便能够正确识别并接收 Map 变量。