Accessing nested child components in VueJS

Question

Using v2.2.2. I have the following structure in my VueJS app. How can I access all of the Account components from a method on my Post component? The number of Accounts is dynamic - I want to grab all of the loaded Account components and iterate over them.

I know it's got something to do with $refs and $children, I just can't seem to figure out the right path.

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

The whole refs thing is extremely fragile if components are deeply nested and/or they get moved around during development. Check this way out instead: stackoverflow.com/a/47889841/34806 — Dexygen
– Dexygen, Commented May 5, 2021 at 12:43

tony19 · Accepted Answer · 2022-07-17 23:39:16Z

59

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

Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using ref. For example:

<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

When ref is used together with v-for, the ref you get will be an array or an object containing the child components mirroring the data source.

Basically inside AccountSelector.vue you can do this.$refs.anAccount.map(account => doThingToAccount(account))

Edit The above answer is for accessing a direct child.

Currently there is no way to access a non direct parent / child component with $refs. The best way to get access to their data would be through events https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication or by using Vuex (Which i would recommend).

Non direct parent - child communication is very tricky without 1 of these 2 methods.

edited Jul 17, 2022 at 23:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 15, 2017 at 15:49

Dan Gamble

4,1852 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

James Glass Over a year ago

Thanks! But how can I bubble up that data to Post? I'm looking to access the data inside of Post, one level above AccountSelector. If I do post.$refs.anAccount I get undefined. I'm missing a level.

Dan Gamble Over a year ago

Sorry i get you now, i'm not sure if you can get undirect children. The best way to get access to their data would be through events vuejs.org/v2/guide/… or by using Vuex (Which i would recommend). Non direct parent - child communication is very tricky without 1 of these 2 methods.

James Glass Over a year ago

Thanks for the reference - that paragraph does indeed state that I'll need to use Vuex. I'm actually currently doing that, just thought there was a more direct way! Can you modify your answer so I can accept it as the answer?

Dan Gamble Over a year ago

I've updated the answer to more directly match the question asked

Jamie Marshall Over a year ago

I'm very late to the party, but would an event bus not be your best option here?

James A Mohler · Accepted Answer · 2019-04-02 19:19:47Z

12

You can access nested components data using $refs and if you want to access the refs inside of it you first have to target the first element of the first refs ([0])

example: parent.$refs[0].$refs.anAccount

edited Apr 2, 2019 at 19:19

James A Mohler

11.1k15 gold badges50 silver badges76 bronze badges

answered Apr 2, 2019 at 19:12

Abraham Duno Aguilera

1211 silver badge2 bronze badges

Collectives™ on Stack Overflow

Accessing nested child components in VueJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related