I recently came across an interesting article on dynamically adding different components in Vue. The article explains a good method for binding different components to tabs, but I have a specific requirement. I want to bind one type/name component that will vary based on the props passed to it. Additionally, each tab should correspond to a unique instance of the component with the corresponding props. Is there a way to reuse my component across different tabs?
For example:
<template>
<button
v-for="tab in tabs"
v-bind:key="tab.name"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>
{{ tab.name }}
</button>
<component v-bind:is="currentTab.component" :id_1=currentTab.id_1 :id_2=currentTab.id_2></component>
</template>
<script>
import tab-component from "..."
var tabs = [
{
name: "WS1",
component: "tab-component",
uwb_id: "PL_DL_test",
ws_id: "id_Ws_1"
},
{
name: "WS2",
component: "tab-component",
uwb_id: "PL_DL_test",
ws_id: "id_Ws_2"
}
]
export default {
components: {
tab-component
},
data() {
return {
tabs: tabs,
currentTab: tabs[0],
}
}
}
<script>
Is there a way to achieve this level of flexibility and reusability within Vue components?
I appreciate any insights or suggestions on how to accomplish this!