Vuejs 2 Übergeben von Prop-Objekt an untergeordnete Komponente und Abrufen

Ich frage mich, wie ein Objekt an eine untergeordnete Komponente mit Requisiten und Abrufen übergeben werden. Ich verstehe, wie man es als Attribute macht, aber wie man ein Objekt weitergibt und das Objekt von der Kindkomponente abruft. Wenn ich this.props von der untergeordneten Komponente verwende, bekomme ich undefined oder eine Fehlermeldung.Vuejs 2 Übergeben von Prop-Objekt an untergeordnete Komponente und Abrufen

Geordnete Komponente

<template> 
     <div> 
     <my-component :v-bind="props"></my-component>  
     </div> 
    </template> 

<script> 
import ChildComponent from "ChildComponent.vue"; 

export default { 
    name: 'ParentComponent', 
    mounted() { 

    }, 
    props: { 
     firstname: 'UserFirstName', 
     lastname: 'UserLastName' 
     foo:'bar' 
    }, 
    components: { 
    ChildComponent 
    }, 
    methods: { 

     } 
} 
</script> 

<style scoped> 
</style>

Kinderkomponente

<script> 
<template> 
    <div> 
    </div> 
</template> 
export default { 
    name: 'ChildComponent', 
    mounted() { 
    console.log(this.props) 
    } 
} 
</script>

Quelle

2017-07-18 icode

1) zur Verfügung Du deine Requisiten korrekt auf Sie übergeordnete Komponente nicht definieren. 2) Sie können die Requisiten Ihrer Elternkomponente nicht über 'v-bind =" reps "' übergeben. 3) Wenn Sie ein Objekt mit Requisitenwerten über 'v-bind' an die Kindkomponente übergeben, müssen Sie diese Requisiten in den Kindkomponenten definieren. 4) Das "Abrufen" von Daten von einer Kindkomponente erfolgt über Ereignisse. 5) Bitte lesen Sie die Dokumentation zu [Vue Komponenten] (https://vuejs.org/v2/guide/components.html) – thanksd

Ich brauche nicht v-bind zu verwenden. Ich habe das von einem Beispiel und versuche es zu benutzen. Ich suche nach dem richtigen Weg, dies zu erreichen. Ich schaue über die Vue-Komponenten doc jetzt – icode

So einfach ist das:

Geordnete Komponente:

<template> 
    <div> 
    <my-component :propObj="anObject"></my-component>  
    </div> 
</template> 

<script> 
import ChildComponent from "ChildComponent.vue"; 

export default { 
    name: 'ParentComponent', 
    mounted() { }, 
    props: { 
     anObject: Object 
    }, 
    components: { 
     ChildComponent 
    }, 
} 
</script> 

<style scoped> 
</style>

Kinder Komponente:

export default { 
    props: { 
    // type, required and default are optional, you can reduce it to 'options: Object' 
    propObj: { type: Object, required: false, default: {"test": "wow"}}, 
    } 
}

Diese Arbeit sollte!

Werfen Sie einen Blick auf Requisiten docs auch:
https://vuejs.org/v2/guide/components.html#Props

Wenn Sie möchten gesendeten Daten vom Kind zum Vater, wie bereits in den Kommentaren darauf Sie haben Ereignisse zu verwenden oder einen Blick auf ‚sync nehmen "-Funktion, die in 2,3 +

https://vuejs.org/v2/guide/components.html#sync-Modifier

Quelle

2017-07-19 15:55:53

Was ist, wenn Sie einen Standardwert nur auf eine Eigenschaft Ihres propObj setzen möchten? Die Standard-Prop-Initialisierung würde nicht ausgelöst werden, da das gesamte Objekt Prop nicht null ist. – Storm

Vuejs 2 Übergeben von Prop-Objekt an untergeordnete Komponente und Abrufen

Antwort

Verwandte Themen