Question

我正在制作一系列工具。

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

在子组件中，我收到此错误：

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

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

这是我的设置：

Tools.vue （父级）：

<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>

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

1 个答案: