Vue.js $ children按组件名称

您不一定需要$refs，实际上，如果您具有深层嵌套的组件，则有时它们是不可行的。在搜索时，我已经多次找到该问答，但是由于我经常遇到这种情况，因此最终决定实施自己的解决方案。不要对老式循环感到厌恶，它们有两个原因是必要的，因为在我推动的每个迭代中，我都会测试x<descendants.length（而不是预先设置诸如len=descendants.length测试之类的东西）在第二个for循环中进入堆栈。

一，用法：

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

实现方式：

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

所有内容几乎相同，但是在Vue 2中，您需要使用：<details ref="detailsChild"></details>而不是v-ref。

然后，您需要做的就是使用this.$refs.detailsChild;，您可以访问它的任何属性。

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

您可以使用以下属性：

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

例如：

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

您所说的这个孩子真的是您要从中访问组件的孩子吗？在这种情况下，v-ref确实是答案：

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

相关API文档：http : //vuejs.org/api/#v-ref