Wie Daten zwischen Komponenten in VueJS teilen

Question

ich eine ziemlich einfache VueJS App haben, 3-Komponenten (Anmelden, SelectSomething, DoStuff)

Anmeldung Komponente nur eine Form für Benutzer und Eingabe passieren, während die zweite Komponente angezeigt werden muss einige Daten, die bei der Anmeldung erhalten wurden.

Wie kann ich Daten von einer Komponente zu den anderen teilen? Also, wenn ich auf die zweite Komponente route habe ich noch die Daten, die ich im Login erhalten habe?

Answer 1

Sie können entweder props oder ein Event-Bus benutzen, wo Sie in der Lage sein werden ein Ereignis von einer Komponente zu emittieren, und hören auf einem anderen

vm.$on('test', function (msg) { 
    console.log(msg) 
}) 

vm.$emit('test', 'hi') 
// -> "hi" 

Answer 2

In Vue.js Komponenten kommunizieren können props miteinander unter Verwendung von oder events. Alles hängt von der Beziehung zwischen Ihren Komponenten ab.

Lassen Sie sich dieses kleine Beispiel nehmen:

<template> 
<h2>Parent Component</h2> 
<child-component></child-component> 
</template> 

, um Informationen von den Eltern auf dem Kind schicken Sie Requisiten müssen verwenden:

<template> 
<h2>Parent Component</h2> 
<child-component :propsName="example"></child-component> 
</template> 

<script> 
export default { 
data(){ 
    return{ 
    example: 'Send this variable to the child' 
    } 
} 
} 
</script> 

Um Informationen vom Kind zum Vater zu schicken, Sie müssen Ereignisse verwenden:

Kinder Komponente

<script> 
... 
this.$emit('example', this.variable); 
</script> 

geordnete Komponente

<template> 
<h2>Parent Component</h2> 
<child-component @example="methodName"></child-component> 
</template> 

<script> 
export default { 
methods: { 
    methodName(variable){ 
    ... 
    } 
} 
} 
</script> 

Überprüfen Sie die Dokumentation von vue.js für weitere Informationen zu diesem Thema. Dies ist eine sehr kurze Einführung.