Imagine I am looking to develop a multi-layered Component for reusability, similar to a 'Tab' UI.
This would allow developers to use it like this:
<tabs>
<tab label="My First Tab">
Content for first tab which could contain components, html, etc.
</tab>
<tab label="My Second Tab">
More Content
</tab>
</tabs>
The challenge arises when we need to access and manipulate the Tab components within the Tabs component without knowing how many tabs will be used.
I've experimented with methods like this.$children and this.slots.default but faced difficulties in accessing the Tab data for functionalities like showing and hiding tabs. It's even more challenging because I'm working with Typescript.
For example:
<template>
<div class="tabs">
<slot /> <!-- Location of the Tab's -->
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
...
})
export default class Tabs extends Vue {
public tabs: any[] = [];
public created() {
this.tabs = this.$slots.default;
let tab = this.tabs.find((obj: any, index: number) => {
return index === 0;
});
}
public select(index: number) {
(this.$slots.default[index] as any).show = true;
}
}
</script>
While exploring existing GitHub libraries for Vue Tabs, I found the logic to be quite complex. I believe there should be a simpler way to access child components using slots/children in Vue. Perhaps I'm being too optimistic.
If anyone has insights on how to handle, pass, or modify data within child slots dynamically, especially when the number of children is unknown, I would greatly appreciate the guidance.