web-dev-qa-db-fra.com

Accès aux composants enfants imbriqués dans VueJS

Utiliser 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 saisir tous les composants chargés Account et les parcourir par-dessus.

Je sais que ça a quelque chose à voir 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>
vue.jsvuejs2vue-component
25
Luke Shaheen

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

Malgré l'existence d'accessoires et d'événements, il peut parfois être nécessaire d'accéder directement à un composant enfant en JavaScript. Pour ce faire, vous devez attribuer un ID de référence au composant enfant à l'aide de 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, il s'agit d'un tableau ou d'un objet contenant les composants enfants reflétant la source de données.

Fondamentalement à l'intérieur de AccountSelector.vue, Vous pouvez faire this.$refs.anAccount.map(account => doThingToAccount(account))

Modifier La réponse ci-dessus concerne l'accès à un enfant direct.

Il n'existe actuellement aucun moyen d'accéder à un composant parent/enfant non direct avec $refs. Le meilleur moyen d'accéder à leurs données serait par le biais d'événements http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication ou en utilisant Vuex (que je recommanderais).

La communication non directe parent-enfant est très délicate sans l'une de ces 2 méthodes.

33
Dan Gamble

Vous pouvez accéder aux données des composants imbriqués à l'aide de $ refs. Si vous souhaitez accéder aux références à l'intérieur, vous devez d'abord cibler le premier élément des premières références ([0]).

exemple: parent.$refs[0].$refs.anAccount

2
Abraham Duno Aguilera