2016-03-03 17 views
9

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?

Antwort

14

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

+0

Für Menschen auf diese mit Vue v2 kommt, würden Sie stattdessen setzen die 'ref' Attribut in der Vorlage wie folgt aus:'

'. https://vuejs.org/v2/api/#ref – thanksd

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

Bitte bearbeiten Sie mit weiteren Informationen. Code-only und "try this" Antworten werden abgeraten, da sie keine durchsuchbaren Inhalte enthalten und nicht erklären, warum jemand "das versuchen sollte". – abarisone

6

Sie diese Eigenschaft verwenden kann :

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

Dadurch wird nur auf den Namen der ersten Komponente im Array $ children zugegriffen, was OP nicht verlangt. – thanksd

+0

Sie können diesen Code verwenden, um Kinder nach Namen zu filtern. – drinor

+0

Wie so? Ihre eine Codezeile greift auf den Namen des ersten Elements im Array zu. Sie haben keine Erklärung dafür gegeben, wie diese Codezeile zur Lösung des OP-Problems verwendet werden könnte. – thanksd

0

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