データオブジェクトを親コンポーネントから子コンポーネントに渡す

Question

ツールのリストを作成しています。

私は、単一のファイルテンプレートを使用して、親コンポーネント（ツールリスト）から完全なツールデータオブジェクトを各子コンポーネント（ツールアイテム）に渡そうとしています。子コンポーネントで

、私はこのエラーを取得する：

...を例 titleまたは descriptionため、工具データオブジェクトの任意のプロパティです

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

。

ここに私のセットアップがあります：それは簡単であるべき

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

<script> 
    export default {} 
</script> 

、しかし：

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（子）私は私のgoogle-fuで解決策を見つけることができません。私はここで何が欠けていますか？

Answer 1

ツールオブジェクト全体を渡す場合は、まずプロパティを宣言します。

export default { 
    props: ["tool"] 
} 

次に、v-forを使用して渡します。あなたは子コンポーネントで

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