Vue.js $enfants de par le nom du composant

j'essaye d'accéder à un enfant par son nom. Pour l'instant à cause de l'endroit où l'enfant est, je vais appeler l'enfant par la présente:

this.$root.$children[0]

qui est ok aussi longtemps que l'enfant est toujours [0] par l'idéal serait génial si il y a un moyen de faire quelque chose comme:

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

je continue à penser que $refs pourrait être la réponse à mon problème, mais ne peut jamais trouver un moyen pour qu'il m'aide.

des idées?

OriginalL'auteur Flakx | 2016-03-03

  1. 15

    Vous pouvez utiliser cette propriété:

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

    Par exemple:

    this.$root.$children.find(child => { return child.$options.name === "name"; });
    Cette juste accède le nom de la première composante de la $children tableau, ce qui n'est pas ce que l'OP est de demander.
    Vous pouvez utiliser ce code pour filtrer les enfants par leur nom.
    Comment alors? Votre ligne de code est l'accès le nom du premier élément dans le tableau. Vous n'avez pas la moindre explication pour savoir comment cette ligne de code peut être utilisé pour résoudre des OP problème.
    Vous pouvez utiliser la commande rechercher: this.$root.$children.find(child => { return child.$options.name === "name"; });. Je vais mettre à jour la réponse.
    Pour sélectionner enfant par le nom de la composante: this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });

    OriginalL'auteur drinor

  2. 1
    this.$root.$children[0].constructor.name
    Merci d'éditer avec plus d'informations. Code-et "essayer cette" réponses sont découragés, car ils ne contiennent pas de contenu disponible pour la recherche, et de ne pas expliquer pourquoi quelqu'un doit "essayer".

    OriginalL'auteur user4229130

  3. 0

    Vous n'avez pas nécessairement besoin d' $refs, en fait, parfois, ils ne sont pas réalisables si vous avez profondément composants imbriqués. J'ai trouvé ce Q&A plusieurs reprises lors de la recherche, mais enfin résolument à mettre en œuvre ma propre solution, car j'ai couru dans cette situation assez fréquemment. Ne pas rechigner à la vieille école pour les boucles, elles sont nécessaires pour un couple de raisons, d'une part, je test pour x<descendants.length (plutôt que de mettre quelque chose comme len=descendants.length à l'avant, et l'essai contre) à chaque itération que je pousse sur la pile dans la deuxième boucle for.

    Première, utilisation:

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

    Mise en œuvre:

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

    OriginalL'auteur George Jempty