web-dev-qa-db-fra.com

Vue.js $ enfants par nom de composant

J'essaie d'accéder à un enfant spécifique par son nom. En ce moment, à cause de l'endroit où se trouve l'enfant, j'appelle l'enfant par ceci:

this.$root.$children[0]

Ce qui n’est pas grave tant que cet enfant est toujours [0], mais ce serait bien de pouvoir faire quelque chose comme:

this.$root.$children['detail']

Je continue de penser que $refs est peut-être la solution à mon problème, mais je ne peux jamais trouver un moyen de m'aider.

Des idées?

javascriptvue.jsweb-frameworks
15
Flakx

Est-ce que cet enfant dont vous parlez est vraiment un enfant du composant auquel vous voulez y accéder? Dans ce cas, v-ref est bien la réponse:

// in the code of the parent component, access the referenced child component like this:

this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>

documentation API pertinente: http://vuejs.org/api/#v-ref

21
Linus Borg

Vous pouvez utiliser cette propriété:

this.$root.$children[0].$options.name

Par exemple:

this.$root.$children.find(child => { return child.$options.name === "name"; });
18
drinor

Tout est à peu près pareil, mais dans Vue 2, vous devez utiliser: <details ref="details-child"></details> au lieu de v-ref. 

Il vous suffit ensuite d'utiliser this.$refs.details-child; pour pouvoir accéder à ses propriétés.

2
Armin
this.$root.$children[0].constructor.name
1
user4229130

Vous n'avez pas nécessairement besoin de $refs; en fait, ils ne sont parfois pas réalisables si vous avez des composants profondément imbriqués. J'ai trouvé ce Q & A plusieurs fois lors de mes recherches, mais j'ai finalement décidé de mettre en œuvre ma propre solution, car je rencontre assez souvent cette situation. Ne rechignez pas à la vieille école pour les boucles, elles sont nécessaires pour plusieurs raisons. Pour l'une d'entre elles, je teste pour x<descendants.length (plutôt que de définir quelque chose comme len=descendants.length dès le départ et d'effectuer des tests contre celle-ci) à chaque itération. m en poussant sur la pile dans la seconde pour la boucle.

Tout d'abord, l'utilisation:

let unPersonalizable = matchingDescendants(this, /a.checkimprintfiinformation$/, {first: true});

La mise en oeuvre:

function matchingDescendants(vm, matcher, options) {
    let descendants = vm.$children;
    let descendant;
    let returnFirst = (options || {}).first;
    let matches = [];

    for (let x=0; x<descendants.length; x++) {
        descendant = descendants[x];

        if (matcher.test(descendant.$vnode.tag)) {
            if (returnFirst) {
                return descendant;
            }
            else {
                matches.Push(descendant);
            }
        }

        for (let y=0, len = descendant.$children.length; y<len; y++) {
            descendants.Push(descendant.$children[y]);
        }    
    }

    return matches.length === 0 ? false : matches;
}
0
George Jempty