В настоящее время создаю веб-страницу в Vue, немного разбираю ее, а затем отрисовываю дочерние компоненты <slot>.
Мне нужно иметь возможность взять слот, разобрать компоненты в массив, а затем отобразить эти компоненты для конечного пользователя.
Что я пробовал
Я пробовал много вариантов вещей, большинство из которых начиналис этим: this.$slots.default
Это последняя версия, которую я пробовал
let slotComponents = [];
this.$slots.default.forEach(vNode => {
slotComponents.push(vNode);
});
Но я также пытался выбрать элементы в vNode и использовать такие вещи, как $childeren длявыберите компоненты.Пока не повезло.
Потенциальные проблемы
Причиной может быть любое количество вещей, но вот то, что я думал, происходило (по порядку)
- Я не получаю компоненты в массив правильно
- Я неправильно отображаю их или что-то упустил из-за того, как они отображаются
- Vue не должен делать это?
Правка - Контекст
Похоже, было бы проще, если бы я дал вам полный контекст моей конкретной проблемы.
Цель
Для создания динамической вкладки компонента.Должно выглядеть следующим образом.
// Example of component use
<tab-container>
<tab>
<!-- Tab Content -->
</tab>
<tab>
<!-- Tab Content -->
</tab>
<tab>
<!-- Tab Content -->
</tab>
<trash>
<!-- This one won't show up -->
</trash>
</tab-container>
Чтобы разобрать этот контент, мне нужно было получить данные слота.
// Inside the <tabs-container> component
computed: {
tabs: function() {
let tabs = []
this.$slots.default.forEach(vNode => {
tabs.push(vNode);
});
return tabs;
}
}
// Inside the <tabs-container> template
<div>
{{tabs[currentTab]}}
</div>