将数据对象从父组件传递给子组件 [英] Pass data object from parent to child component
问题描述
我正在制作工具清单.
我正在尝试使用单个文件模板将完整的工具数据对象从父组件(工具列表)传递到每个子组件(工具项).
在子组件中，我收到此错误:
<块引用>属性或方法..."未在实例上定义，但在渲染期间被引用.确保在 data 选项中声明响应式数据属性.
其中 ... 是工具数据对象的任何属性，例如 title 或 description.
这是我的设置:
Tools.vue(父级):
<main id="工具"><tool v-for="工具中的工具" :data="tool" :key="tool.id"></tool></main></模板><脚本>从'./Tool.vue'导入工具让测试 = {编号:1，title: '标题',描述:'描述'};导出默认{数据() {返回 {工具: [测试]}},组件:{'工具':工具}}Tool.vue(子):
<div class="工具"><div class="title">{{ title }}</div><div class="description">{{ description }}</div></模板><脚本>导出默认{}
应该很简单，但是我无法使用我的 google-fu 找到解决方案.我在这里缺少什么?
如果要传递整个工具对象，请先声明属性.
出口默认{道具:[工具"]}然后，使用您的 v-for 传递它.
</tool> 您可以使用
在子组件的模板中引用它{{ tool.title }}<div class="description">{{ tool.description }}</div>
I'm making a list of tools.
I'm trying to pass the full tool data object from the parent component (the tool list) to each child component (the tool items), using single file templates.
In the child component, I get this error:
Property or method "..." is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Where ... is any property of the tool data object, for example title or description.
Here's my setup:
Tools.vue (parent):
<template>
<main id="tools">
<tool v-for="tool in tools" :data="tool" :key="tool.id"></tool>
</main>
</template>
<script>
import Tool from './Tool.vue'
let test = {
id: 1,
title: 'Title',
description: 'Description'
};
export default {
data() {
return {
tools: [
test
]
}
},
components: {'tool': Tool}
}
</script>
Tool.vue (child):
<template>
<div class="tool">
<div class="title">{{ title }}</div>
<div class="description">{{ description }}</div>
</div>
</template>
<script>
export default {}
</script>
It should be simple, but I'm unable to find the solution with my google-fu. What am I missing here?
If you want to pass the entire tool object, first declare the property.
export default {
props: ["tool"]
}
Then, pass it using your v-for.
<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool>
You can reference it in your child component's template using
<div class="title">{{ tool.title }}</div>
<div class="description">{{ tool.description }}</div>
这篇关于将数据对象从父组件传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
