I don't know how to create changeable text for reusable component in Vue Js
P粉957723124
2023-09-03 22:33:40
<p>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</p>
<pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre>
<p>Then let this header change the text inside this div, which is the main header of the TabsWrapper component. </p>
<pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre>
<p>My code:
The first is the out-of-component code I added to the homepage of the website. </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>The second one is the code inside the component responsible for TabsWrapper</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>This code gets each title from the Tab</p>
<pre class="brush:php;toolbar:false;"><Tab title="Tab 1">Hello 1</Tab></pre>
<p>This code renders it</p>
<pre class="brush:php;toolbar:false;"><li
v-for="title in tabTitles"
:key="title"
@click="selectedTitle = title"
:class=" {selected: title ==selectedTitle}"
>
{{ title }}
</li></pre>
<p>I tried repeating the same technique and it worked, but I think there is a better way</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><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></pre>
</p>
You can simply pass the props in the script tag and access them directly using this keyword and the prop name.
In a template tag like this
You don't need to use ref you can just use v-for directly and loop over the array elements.