Vue.js $ Kinder nach Komponentenname

Question

Ich versuche, auf ein bestimmtes Kind mit Namen zuzugreifen. Im Moment, da, wo das Kind ist, ich rufe das Kind durch diese:

this.$root.$children[0] 

, die so lange in Ordnung ist, wie das Kind immer [0] durch ideal wäre es toll, wenn Theres eine Möglichkeit, so etwas wie:

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

i denke immer $ refs die anwser zu meinem Problem sein könnte, aber nie einen Weg finden, dass es mir hilft.

irgendwelche Ideen?

Answer 1

Ist dieses Kind, von dem Sie sprechen, wirklich ein Kind der Komponente, auf die Sie zugreifen möchten? In diesem Fall ist v-ref in der Tat die Antwort:

// 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>

relevante API-Dokumentation:

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

Zum Beispiel: http://vuejs.org/api/#v-ref

Answer 2

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

Answer 3

Sie diese Eigenschaft verwenden kann :

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

Answer 4

Sie müssen nicht unbedingt $refs brauchen in der Tat manchmal nicht möglich, sie sind, wenn Sie tief verschachtelte Komponenten haben. Ich habe diese Q & A mehrere Male während der Suche gefunden, aber schließlich entschieden, meine eigene Lösung zu implementieren, da ich in dieser Situation ziemlich häufig stoße. Brechen Sie nicht bei den Old-School-Schleifen, sie sind aus einer Reihe von Gründen notwendig, zum einen, ich teste für x<descendants.length (anstatt etwas wie len=descendants.length im Voraus zu setzen und dagegen zu testen) bei jeder Iteration m in der zweiten for-Schleife auf den Stack drücken.

Zuerst Nutzung:

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

Umsetzung:

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