vue.js Daten aus einzelnen Dateikomponente Eltern auf das Kind

Question

verwenden einzelne Datei Architektur vorbei Ich versuche, Daten zu übergeben (ein Objekt) von einem übergeordneten Komponente zu einem Kind:

App.vue

<template> 
    <div id="app"> 
    <app-header app-content={{app_content}}></app-header> 
    </div> 
</template> 

<script> 
import appHeader from './components/appHeader' 
import {content} from './content/content.js' 

export default { 
    components: { 
    appHeader 
    }, 
    data:() => { 
    return { 
     app_content: content 
    } 
    } 
} 
</script> 

appHeader.vue

<template> 
    <header id="header"> 
    <h1>{{ app_content }}</h1> 
    </header> 
</template> 

<script> 
export default { 
    data:() => { 
    return { 
     // nothing 
    } 
    }, 
    props: ['app_content'], 
    created:() => { 
    console.log(app_content) // undefined 
    } 
} 
</script> 

Scheint so eine triviale Aufgabe zu sein und wahrscheinlich die soluti ist ganz einfach. Danke für irgendeinen Rat :)

Answer 1

Sie sind fast da.

Um die app_content Variable von App.vue das Kind Komponente Sie es als ein Attribut in der Vorlage wie so passieren müssen zu senden:

<app-header :app-content="app_content"></app-header> 

Um nun die :app-component Eigenschaft nach innen zu erhalten appHeader.vue müssen Sie Ihre Requisite von app_component zu appComponent umbenennen (das ist Vues Konvention der Weitergabe von Eigenschaften). Schließlich, um es in der Vorlage des Kindes zu drucken, ändern Sie einfach zu: {{ appContent }}