I don't know how to create changeable text for reusable component in Vue Js

Question

I'm creating a reusable tab component by watching a tutorial. After watching it, I understood how it works. However, for my project I need to create tabs with a title that can be changed since this is a reusable component so I have to change the title for each new tab but I haven't figured it out yet Find out how. I need to somehow get the title from the TabsWrapper component I added to the page

<div class="tab_header">{{title}}</div>

Then let this header change the text inside this div, which is the main header of the TabsWrapper component.

<div class="tab_header">{{title}}</div>

My code: The first is the out-of-component code I added to the homepage of the website.

<TabsWrapper>
      <Tab title="Tab 1">Hello 1</Tab>
      <Tab title="Tab 2">Hello 2 </Tab>
      <Tab title="Tab 3">Hello 3</Tab>
      <Tab title="Tab 4">Hello 4</Tab>
    </TabsWrapper>

The second one is the code inside the component responsible for TabsWrapper

<template>

  <div class="tabs">
    <div class="tab_header"></div>
    <ul class="tabs_header">
      <li
      v-for="title in tabTitles"
      :key="title"
      @click="selectedTitle = title"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ title }}
      </li>
    </ul>
    <slot />
  </div>
</template>
<script>
import { ref} from 'vue';
import { provide } from 'vue';
export default{
    setup(props,{slots}){
        const tabTitles=ref(slots.default().map((tab)=> tab.props.title))
        const selectedTitle=ref(tabTitles.value[0])

        provide("selectedTitle", selectedTitle)

        return{
            selectedTitle,
            tabTitles,
            
        
        }
    }
}

</script>

This code gets each title from the Tab

<Tab title="Tab 1">Hello 1</Tab>

This code renders it

<li
      v-for="title in tabTitles"
      :key="title"
      @click="selectedTitle = title"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ title }}
      </li>

I tried repeating the same technique and it worked, but I think there is a better way

<code> <div class="tabs">
    <div class="tab_header" v-for="headtitle in headTitles" :key="headtitle">{{headtitle}}</div>
    <ul class="tabs_header">
      <li
      v-for="title in tabTitles"
      :key="title"
      @click="selectedTitle = title"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ title }}
      </li>
    </ul>
    <slot />
  </div>
</template>
<script>
import { ref} from 'vue';
import { provide } from 'vue';
export default{
    setup(props,{slots}){
        const tabTitles=ref(slots.default().map((tab)=> tab.props.title))
        const headTitles=ref(slots.default().map((tab)=>tab.props.headtitle))
        const selectedTitle=ref(tabTitles.value[0])

        provide("selectedTitle", selectedTitle)

        return{
            selectedTitle,
            tabTitles,
            headTitles,
            
        
        }
    }
}

</script></code>

Answer 1

You can simply pass the props in the script tag and access them directly using this keyword and the prop name.

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

In a template tag like this

<span>{{ foo }}</span>

You don't need to use ref you can just use v-for directly and loop over the array elements.

<li v-for="(item, index) in foo">
  {{item}}
</li>