按组件名称的Vue.js $ children

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了按组件名称的Vue.js $ children相关的知识,希望对你有一定的参考价值。

我正试图通过名字访问一个特定的孩子。目前,由于孩子在哪里,我这样称呼孩子:

this.$root.$children[0]

只要那个孩子总是[0],这是好的,但如果有办法做某事,那就太好了:

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

我一直在想$refs可能是我的问题的答案,但永远找不到它有助于我的方式。

有任何想法吗?

答案

您正在谈论的这个孩子真的是您要从中访问它的组件的孩子吗?在这种情况下,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>
另一答案

您可以使用此属性:

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

例如:

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

一切都差不多,但在Vue 2中你需要使用:<details ref="details-child"></details>而不是v-ref。

然后你需要做的就是使用this.$refs.details-child;,你可以访问它的任何属性。

另一答案
this.$root.$children[0].constructor.name
另一答案

你不一定需要$refs,事实上,如果你有深层嵌套的组件,它们有时是不可行的。我在搜索时已经多次发现这个Q&A,但最后我决定实施自己的解决方案,因为我经常遇到这种情况。不要为了旧学校的循环而犹豫不决,出于几个原因它们是必要的,其中一个原因是,我在每次迭代时测试x<descendants.length(而不是像前面那样设置len=descendants.length,并对其进行测试) m在第二个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;
}
另一答案

昨晚我试图针对一些孩子。我试图在输入上调用el.focus()。我的问题是我试图通过按钮点击触发的实例方法来完成它,输入是在第三方库中我把它包装在另一个组件中。

我的解决方案是在我的包装组件上放一个ref

例如,如果您有这样的标记:

<my-dropdown ref="myDropdown"></my-dropdown>

my-dropdown内,你可以在其中一个孩子身上放另一个ref

<template>
    <div>
        <my-library-wrapper ref="libWrapper"></my-library-wrapper>
    </div>
</template>

my-library-wrapper内部,您可以从node_modules的库中导入,其中包含refs。大多数库都会对引物进行引用,以便您可以使用它们来定位它们。

现在,您可以使用以下代码开始定位我们的示例组件:

 console.log(this.$refs.myDropdown);

 console.log(this.$refs.myDropdown.$refs);

 console.log(this.$refs.myDropdown.$refs.libWrapper);

 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.focus();
 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.click();

乍一看,这可能看起来很奇怪,但与this.$refs.myDropdown.$children[0].$children[1].focus();这样的东西相比,这样做的好处是refs不那么脆弱。如果您或其他人稍后将<divs>添加到标记中,则使用refs的代码将不会中断,因为Vue按名称而不是相对距离查找这些引用的元素。

我的建议是把ref="something"放在某事上并做console.log(this.$refs.something.$refs);并看看你能看到什么,当你这样做时,做console.log(this.$refs.something);并看看那里有什么样的其他东西 - 像$attrs$children$el这样的东西。

以上是关于按组件名称的Vue.js $ children的主要内容,如果未能解决你的问题,请参考以下文章

在 vue.js 组件中反应 this.props.children

vue.js学习笔记七

vue.js学习笔记七

vue.js学习笔记七

在 vue.js 组件中渲染子组件

459 vue使用$root$parent$children进行父子组件通信