Jak udostępniać danych pomiędzy komponentami w VueJS

Question

Mam dość proste VueJS aplikację, 3 składników (Login, SelectSomething, DoStuff)

Logowanie składnikiem jest tylko formą dla użytkownika i przekazać wejście natomiast drugi składnik musi wyświetlać niektóre dane uzyskane w wyniku logowania.

Jak mogę udostępnić dane z jednego komponentu innym? Tak więc, kiedy kieruję się do drugiego komponentu, nadal mam dane uzyskane w logowaniu?

Answer 1

Można użyć props lub autobus imprez, gdzie będziesz w stanie emitować zdarzenia z komponentu i słuchać na innym

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

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

Answer 2

w komponentach Vue.js mogą komunikować się ze sobą za pomocą props lub events. Wszystko zależy od relacji między Twoimi komponentami.

Weźmy ten mały przykład:

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

Aby wysłać informację od rodzica do dziecka, trzeba będzie użyć rekwizyty:

<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> 

Aby wysłać informację od dziecka do rodzica, Będziesz musiał użyć zdarzeń:

Dziecko Komponent

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

nadrzędna Komponent

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

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

Sprawdź dokumentację vue.js uzyskać więcej informacji na ten temat. To jest bardzo krótkie wprowadzenie.