Question

使用v2.2.2。我的VueJS应用程序中有以下结构。如何从Post组件上的方法访问所有Account组件？帐户数量是动态的 - 我想抓住所有已加载的Account组件并迭代它们。

我知道这与$refs和$children有关，我似乎无法弄清楚正确的道路。

<Root>
    <Post>
        <AccountSelector>
            <Account ref="anAccount"></Account>
            <Account ref="anAccount"></Account>
            <Account ref="anAccount"></Account>
        </AccountSelector>
    </Post>
</Root>

Answer 1

http://vuejs.org/v2/guide/components.html#Child-Component-Refs

尽管存在道具和事件，但有时您可能仍需要直接访问JavaScript中的子组件。要实现此目的，您必须使用ref为子组件分配引用ID。例如：

cvs diff -r <revision> <file> > /tmp/patch
cp <file> /tmp
cd /tmp
patch -R < patch

当ref与v-for一起使用时，你得到的ref将是一个数组或包含镜像数据的子组件的对象源。

基本上在<div id="parent"> <user-profile ref="profile"></user-profile> </div> var parent = new Vue({ el: '#parent' }) // access child component instance var child = parent.$refs.profile内你可以AccountSelector.vue

修改以上答案是为了接触直接的孩子。

目前无法使用this.$refs.anAccount.map(account => doThingToAccount(account))访问非直接父/子组件。访问其数据的最佳方式是通过事件http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication或使用Vuex（我建议）。

如果没有这两种方法中的一种，非直接的亲子沟通非常棘手。

Answer 2

您可以使用$ refs访问嵌套的组件数据，如果要访问其中的ref，则必须首先定位第一个ref（[0]）的第一个元素

示例：parent.$refs[0].$refs.anAccount

在VueJS中访问嵌套的子组件

2 个答案: