javascript - versiones - Vue.js $ hijos por nombre del componente
vue script src (4)
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?
this.$root.$children[0].constructor.name
this.$root.$children[0].$options.name
¿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
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;
}