Как отфильтровать дочерние компоненты в Vue по типу их компонентов?

Question

У меня проблемы с определением дочерних компонентов в Vue.

У меня есть эта разметка здесь:

<parent>
    <child-one>
    </child-one>

    <child-two>
    </child-two>

    <child-one>
    </child-one>
</parent>

Компонент parent работает, поэтому он делает это:

render(createElement) {
    return createElement('div', this.$slots.default);
},

Я хочу перебрать this.$children и вернуть массив VNodes вроде этого:

const matchingChildren = this.$children
    .filter(child => child.isChildOneType === true)

return createElement('div', {}, matchingChildren)

Как мне это сделать?

Что и где мне нужно фильтровать?

Я почти уверен, что смогу сделать это, установив type prop на child-one, а затем используя this.$children.filter(child => child.$attrs.type === 'special'), но я хочу отфильтровать их по факту, что они child-one компоненты.

Я пытаюсь сделать пример простым, но это для страниц с вкладками, поэтому я не заинтересован в условном рендеринге. Я пытаюсь преобразовать разметку в другой вывод DOM, и мне нужно отфильтровать дочерние элементы определенного типа.

Я исследовал $attrs и $options как крючки, которые я мог бы использовать, но если я использую attrs, мне нужно добавить опору для каждого компонента. Я хотел бы избежать этого, так как они все типа child-one. Я также не могу добавить статическое свойство к child-one. Поле $options всегда пусто.

Answer 1

В этом нет ничего плохого или нестандартного, если задать конкретное свойство для использования в качестве критерия фильтрации, например

this.$children.filter(child => child.$attrs.type === 'special')

Если ваши дочерние компоненты являются братьями и сестрами другой некомпонентной разметки или те из вас, которые не хотят фильтроваться, у вас нет другого выбора, кроме как установить реквизит, указывающий, что они являются необходимыми вам компонентами.

В браузере дочерние узлы являются просто общими и не могут быть должным образом изолированы друг от друга без использования какого-либо идентификатора; например, имя тега, идентификатор, атрибут или свойство. Узлы, визуализируемые с помощью Vue, React, HTML, нативного JS, в общем и целом одинаковы с точки зрения браузера.

Поскольку вы не можете использовать имена компонентов, такие как child-one, потому что они будут отображаться как обычный HTML, вы можете просто добавить атрибут / v-атрибут для каждой оболочки компонента в ваших шаблонах Vue и просто отфильтровать их, как нормальные узлы после рендеринга.

<parent>
    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>

    <child-two>
         <div class="wrapper" :componentType="data.type"></div>
    </child-two>

    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>
</parent>

Или вы можете добавить атрибуты к самому компоненту, чего я никогда раньше не пробовал, поэтому я не могу помочь вам с этим