Vue.js 将数据对象从父组件传递到子组件

我正在列一张工具清单

我试图使用单个文件模板将完整的工具数据对象从父组件（工具列表）传递到每个子组件（工具项）

在子组件中，我得到以下错误：

属性或方法“…”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性

其中，

…

是工具数据对象的任何属性，例如

标题

或

说明

以下是我的设置：

工具.vue（父级）：

从“./Tool.vue”导入工具
让测试={
id:1，
标题：“标题”，
描述：“描述”
};
导出默认值{
数据（）{
返回{
工具：[
测试
]
}
},
组件：{'tool'：tool}
}

工具.vue（子项）：

{{title}}
{{description}}
导出默认值{}

---

这应该很简单，但我无法用我的谷歌fu找到解决方案。我错过了什么

如果要传递整个工具对象，请首先声明属性

export default {
  props: ["tool"]
}

然后，使用

v-for

传递它

<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool>

您可以使用在子组件的模板中引用它

<div class="title">{{ tool.title }}</div>
<div class="description">{{ tool.description }}</div>

{{tool.title}
{{tool.description}}

在子组件中声明道具，支持该子组件接受。我知道我可以这样做。但是有没有办法传递完整的数据对象呢？是的，您可以将

$data

存储在属性

中，但不确定这是否是个好主意。

<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool>

<div class="title">{{ tool.title }}</div>
<div class="description">{{ tool.description }}</div>