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

Question

我正在制作工具清单.

我正在尝试使用单个文件模板将完整工具数据对象从父组件(工具列表)传递到每个子组件(工具项).

在子组件中,我收到此错误:

属性或方法"..."未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.

其中...是该工具数据对象的任何属性,例如title或description.

这是我的设置:

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 (孩子):

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

<script>
    export default {}
</script>

它应该很简单,但我无法用我的google-fu找到解决方案.我在这里错过了什么？

Answer 1

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

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>