2017-02-08 5 views
0

Ich verwende vue2, um mein Projekt zu entwickeln.vue 2 Eltern bekommen Kinder Komponentendaten

Wenn die Komponentenhalterungen (oder beforeMounts), es Anfangsdaten aus vuex holt, und legte es Daten zur Komponente. Nachdem der Benutzer auf die Schaltfläche geklickt hat, wird die Methode des übergeordneten Elements ausgelöst. Ich muss die Daten des Kindes bekommen. Wie bekomme ich es?

Die übergeordnete Komponente hat die Handle-Methoden, die Rückrufe von der untergeordneten Komponente. Die untergeordnete Komponente hat die child2-Komponente, die die Daten enthält, die die übergeordnete Komponente benötigt.

in html wie:

<parent> 
    <child> 
    <child2></child2> 
    </chlid> 
</parent> 

brauche ich child2 die Daten in der Eltern-Methode zu behandeln. Und die Handle-Methode des Elterns ist die Callback-Methode des Kindes.

Antwort

0

können Sie $emit verwenden von Kind Komponente Eltern-Methode aufrufen und die Variable, die Sie wollen passieren zu Eltern-Methode übergeben.

Werfen Sie einen Blick auf diese answer für weitere Details.

+0

ich nicht $ in meinem Fall emittieren können. Ich habe meine Frage nicht geklärt. Die übergeordnete Komponente hat die Handle-Methoden, die Rückrufe von der untergeordneten Komponente. Die untergeordnete Komponente hat die child2-Komponente, die die Daten enthält, die die übergeordnete Komponente benötigt. in html wie: brauche ich child2 die Daten in der Eltern-Methode zu behandeln. Und die Handle-Methode des Elterns ist die Callback-Methode des Kindes. @@ – KevinHu

0

Da Sie Vuex verwenden, stellen nur die Kinder Aktionen ausführen, die den Zustand zu ändern, und die Eltern machen reagieren auf solche Veränderungen durch Getter verwendet wird. Weitere Informationen über das letzte, was ich hier: https://vuex.vuejs.org/en/getters.html

0

Schließlich habe ich nur die Daten von Kind zu Eltern bewegen. Mach das Kind rein und es funktioniert. Danke für Ihre Hilfe.

0

Can u versuchen Sie es wie auf diese Weise:

Stammkomponente:

<child @childReady="do()"></child> 

export default { 
    methods: { 
     do() { 
     } 
    }  
} 

Kind Komponente:

mounted() { 
    this.$emit('childReady'); 
}