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

2022-01-25 00:00:00 vue.js vue-component vuejs2

我正在制作工具列表.

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

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:

属性或方法..."未在实例上定义，但在渲染期间被引用.确保在 data 选项中声明响应式数据属性.

Property or method "..." is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

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

Where ... is any property of the tool data object, for example title or 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 找到解决方案.我在这里想念什么?

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"]
}

然后，使用您的 v-for 传递它.

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>

相关文章