访问VueJS中的嵌套子组件

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

我知道它与$refs和$children有关，我似乎无法找出正确的道路。

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

来源

2017-03-15 Luke Shaheen

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

尽管道具和活动的存在，有时你可能仍然需要直接访问一个子组件在JavaScript中。要达到此目的，您必须使用ref为子组件分配参考ID。例如：

<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

当裁判用v-为一起使用，将得到ref将为阵列或含有该子组件镜像数据源的对象。

基本上里面AccountSelector.vue你可以做this.$refs.anAccount.map(account => doThingToAccount(account))

编辑以上回答是用于访问直接孩子。

目前无法访问$refs的非直接父/子组件。获取数据的最佳方式是通过事件http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication或使用Vuex（我会推荐）。

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

来源

2017-03-15 15:49:04

谢谢！但是，我怎样才能将这些数据发布到“Post”？我正在寻找访问Post中的数据，比AccountSelector高一级。如果我做'后。$ refs.anAccount'我得到未定义。我错过了一个关卡。 –

对不起，我现在得到你，我不知道你是否可以得到不直接的孩子。访问他们的数据的最好方法是通过活动http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication或通过使用Vuex（我会推荐）。如果没有这两种方法中的一种，非直接的亲子沟通是非常棘手的。 –

感谢您的参考 - 该段确实声明我需要使用Vuex。我实际上正在这样做，只是认为有一个更直接的方式！你能修改答案，以便我可以接受答案吗？ –

访问VueJS中的嵌套子组件

回答

相关问题