javascript - versiones - Vue.js $ hijos por nombre del componente

vue script src

Question

Estoy tratando de acceder a un niño específico por su nombre. En este momento, debido a dónde está el niño, le estoy llamando al niño por esto:

this.$root.$children[0]

lo cual está bien siempre que ese niño siempre sea [0] idealmente sería genial si hay una manera de hacer algo como:

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

Sigo pensando que $ refs podría ser la causa de mi problema, pero nunca puedo encontrar una forma de que me ayude.

¿algunas ideas?

Answer 1

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

Answer 2

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

Answer 3

¿Es este niño del que usted habla realmente un elemento secundario del componente desde el que desea acceder? En este caso, v-ref es de hecho la respuesta:

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

Documentación relevante de la API: http://vuejs.org/api/#v-ref

Answer 4

No necesariamente necesita $refs , de hecho, a veces no son factibles si tiene componentes profundamente anidados. He encontrado esta sección de preguntas y respuestas varias veces mientras busco, pero finalmente decidí implementar mi propia solución ya que me encuentro con esta situación con bastante frecuencia. No se rehúse a la vieja escuela por bucles, son necesarios por un par de razones, para empezar, pruebo x<descendants.length (en lugar de establecer algo como len=descendants.length por adelantado, y probarlo contra eso) en cada iteración mientras estoy presionando en la pila en el segundo ciclo for.

Primero, uso:

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

Implementación:

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