Accès aux composants pour enfants imbriqués dans VueJS
en utilisant v2.2.2. J'ai la structure suivante dans mon application VueJS. Comment puis-je accéder à tous les composants du compte à partir d'une méthode sur mon composant Post? Le nombre de Comptes est dynamique - je veux récupérer toutes les chargés Account composants et itérer sur eux.
je sais qu'il a quelque chose à faire avec $refs et $children, je n'arrive pas à trouver le bon chemin.
<Root>
<Post>
<AccountSelector>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
</AccountSelector>
</Post>
</Root>
1 réponses
http://vuejs.org/v2/guide/components.html#Child-Component-Refs
malgré l'existence d'accessoires et d'événements, il est parfois nécessaire d'accéder directement à un composant enfant en JavaScript. Pour ce faire, vous devez assigner un ID de référence au composant enfant en utilisant ref. Par exemple:
<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
lorsque ref est utilisé avec v-for, le ref que vous obtenez sera un tableau ou un objet contenant l'enfant composantes reflétant les données source.
Fondamentalement à l'intérieur de AccountSelector.vue vous pouvez faire this.$refs.anAccount.map(account => doThingToAccount(account))
Modifier La réponse ci-dessus est pour accéder à un enfant direct.
Actuellement, il n'y a aucun moyen d'accéder à une composante parent / enfant non directe avec $refs. La meilleure façon d'accéder à leurs données serait de passer par des événementshttp://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication ou en utilisant Vuex (Que je recommande).
la communication parent - enfant Non directe est très délicate sans l'une de ces deux méthodes.