Übergeben Sie Datenobjekt von übergeordneter zu untergeordneter Komponente

Question

Ich mache eine Liste von Tools.

Ich versuche, das vollständige Tool-Datenobjekt aus der übergeordneten Komponente (der Werkzeugliste) an jede untergeordnete Komponente (die Tool-Elemente) zu übergeben, indem Sie einzelne Dateivorlagen verwenden.

In der untergeordneten Komponente, bekomme ich diesen Fehler:

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

Wo ... jede Eigenschaft des Objekts Werkzeugdaten ist zum Beispiel title oder description.

Hier ist mein Setup:

Tools.vue (Eltern):

<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 (Kind):

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

<script> 
    export default {} 
</script> 

Es sollte einfach sein, aber Ich kann die Lösung mit meinem Google-Fu nicht finden. Was fehlt mir hier?

Answer 1

Wenn Sie das gesamte Werkzeugobjekt übergeben möchten, müssen Sie zuerst die Eigenschaft deklarieren.

export default { 
    props: ["tool"] 
} 

Dann übergeben Sie es mit Ihrer v-for.

<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool> 

Sie können es in der Vorlage des Kindes Komponente Referenz mit

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