Доступ к вложенным дочерним компонентам в VueJS

Использование v2.2.2. У меня есть следующая структура в моем приложении VueJS. Как я могу получить доступ ко всем компонентам учетной записи из метода на моем компоненте Post? Количество учетных записей динамическое - я хочу захватить все загруженные компоненты Account и перебрать их.

Я знаю, что это как-то связано с $refs и $children, я просто не могу понять правильный путь.

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

Ответы

Ответ 1

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

Несмотря на наличие реквизита и событий, иногда вам может потребоваться прямой доступ к дочернему компоненту в JavaScript. Для этого вам необходимо присвоить ссылочный идентификатор дочернему компоненту, используя 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

Когда ref используется вместе с v-for, ref вы получите будет массив или объект, содержащий дочерние компоненты, отражающие данные источник.

В основном внутри AccountSelector.vue вы можете сделать this.$refs.anAccount.map(account => doThingToAccount(account))

Edit Вышеупомянутый ответ предназначен для доступа к прямому ребенку.

В настоящее время нет способа получить доступ к непрямому родительскому/дочернему компоненту с помощью $refs. Лучший способ получить доступ к их данным будет через события http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication или с помощью Vuex (что я бы рекомендовал).

Непрерывная связь между родителями и детьми очень сложна без 1 из этих 2 методов.

Ответ 2

Вы можете получить доступ к данным вложенных компонентов, используя $ refs, и если вы хотите получить доступ к ссылкам внутри них, вы сначала должны нацелиться на первый элемент первых ссылок ([0])

пример: parent. $ refs [0]. $ refs.anAccount