Получить список компонентов с указанием имени компонента независимо от их вложенности - Vue - PullRequest
Новая
       5

Получить список компонентов с указанием имени компонента независимо от их вложенности - Vue

0 голосов
/ 27 мая 2020

У меня в приложении есть следующая боковая панель:

enter image description here

Код компонента элемента дерева: 

 <!-- tree item template -->
 <script type="text/x-template" id="tree-item-template">
    <div>
        <div>
            <user-card @toggle-supervisor="toggle" :user_info="item" :key="item.id_user"></user-card>
        </div>
        <div v-show="isOpen" v-if="isFolder" class="ml-3">
            <tree-item
            v-for="(child, index) in item.employees"
            :key="index"
            :item="child"
            ></tree-item>
        </div>
    </div>
</script>

Это компонент содержит внутри еще один компонент, называемый пользовательской картой.

Я бы хотел получить массив со всеми компонентами с именем «пользовательская карта», независимо от того, что они вложены во многие другие компоненты.

Причина в том, что я хочу изменить цвет имени на синий, когда пользователь выбран (щелкнул), и на черный, когда элемент не выбран

Я обнаружил, что с помощью this.$children я могу получить список компонентов внутри компонента, но не все из них, поэтому мне интересно, есть ли способ получить список всех элементов по имени компонента

1 Ответ

1 голос
/ 27 мая 2020

Вы можете использовать этот простой фрагмент кода: 

        const child = this.$children.slice();
        const cards = [];
        let cur;
        while (child.length > 0)
        {
          cur = child.shift();
          if (cur.$options.name === 'user-card') cards.push(cur);
          else
          {
            cur = cur.$children.slice();
            for (let i = 0; i < cur.length; i++) child.push(cur[i]);
          }
        }
        // now you have your user cards inside the "cards" array
...