vue 如何传递 map 类型变量到子组件？

在 Vue 中，如果您在父组件中定义了一个 map 类型的变量，并希望在子组件中使用它，您可能会遇到错误。这是因为 Vue 无法在组件之间传递 map 类型变量。

赋值

在父组件中声明 map 类型的变量：

export default {
  data() {
    return {
      roomPictureList: {}
    }
  }
}

传递

在子组件中尝试使用父组件的变量：

<template><div>
    {{ roomPictureList }}
  </div>
</template><script>
import { useRoom } from '/composables/useRoom'

export default {
  setup() {
    const { roomPictureList } = useRoom()
    return { roomPictureList }
  }
}
</script>

控制台

Vue-router参考手册

Vue-router参考手册下载

下载

您可能会在控制台看到一个错误，类似于：

[Vue warn]: Property "roomPictureList" was accessed during render but is not defined on instance.

原因

此错误是由于 roomPictureList 的初始值是空 map，而不是 null。这意味着 Vue 无法跟踪 map 的更新，因为它将其视为 undefined 而不是一个可变对象。

解决方案

为了解决此问题，您可以将 roomPictureList 的初始值更改为 null：

export default {
  data() {
    return {
      roomPictureList: null
    }
  }
}

这样做将允许 Vue 追踪 map 的更新，并允许您在子组件中使用它。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！