Uzyskiwanie dostępu do zagnieżdżonych komponentów potomnych w VueJS

Question

Korzystanie z v2.2.2. Mam następującą strukturę w mojej aplikacji VueJS. Jak uzyskać dostęp do wszystkich składników konta z metody w moim komponencie Post? Liczba kont jest dynamiczna - chcę pobrać wszystkie załadowane komponenty Account i powtórzyć je.

Wiem, że ma to coś wspólnego z $refs i $children, po prostu nie mogę wymyślić właściwej ścieżki.

<Root> 
    <Post> 
     <AccountSelector> 
      <Account ref="anAccount"></Account> 
      <Account ref="anAccount"></Account> 
      <Account ref="anAccount"></Account> 
     </AccountSelector> 
    </Post> 
</Root> 

Answer 1

http://vuejs.org/v2/guide/components.html#Child-Component-Refs

Pomimo istnienia rekwizytów i zdarzeń, czasami może trzeba jeszcze bezpośredni dostęp do komponentu dziecko w JavaScript. Aby to osiągnąć, należy przypisać identyfikator referencyjny do komponentu potomnego za pomocą ref. Na przykład:

<div id="parent"> 
    <user-profile ref="profile"></user-profile> 
</div> 

var parent = new Vue({ el: '#parent' }) 
// access child component instance 
var child = parent.$refs.profile 

Kiedy ref stosuje się razem z V-do, sędzia dostaniesz będzie tablicą lub przedmiot zawierający elementy podrzędne mirroring danych źródła.

Zasadniczo wewnątrz AccountSelector.vue można zrobić this.$refs.anAccount.map(account => doThingToAccount(account))

Edit Powyższa odpowiedź jest bezpośredni dostęp do dziecka.

Obecnie nie ma możliwości uzyskania dostępu do komponentu nadrzędnego/podrzędnego innego niż bezpośredni z $refs. Najlepszym sposobem na uzyskanie dostępu do ich danych byłoby zdarzenie http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication lub użycie Vuex (co polecam).

Bezpośredni rodzic - komunikacja dzieci jest bardzo trudna bez jednej z tych 2 metod.