Je ne sais pas comment créer du texte modifiable pour un composant réutilisable dans Vue Js

Question

Je crée un composant d'onglet réutilisable en regardant un didacticiel. Après l'avoir regardé, j'ai compris comment ça fonctionnait. Cependant, pour mon projet, je dois créer des onglets avec un titre qui peut être modifié puisqu'il s'agit d'un composant réutilisable, je dois donc changer le titre pour chaque nouvel onglet mais je n'ai pas encore compris. Découvrez comment. J'ai besoin d'une manière ou d'une autre d'obtenir le titre du composant TabsWrapper que j'ai ajouté à la page

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

Ensuite, laissez cet en-tête modifier le texte à l'intérieur de ce div, qui est l'en-tête principal du composant TabsWrapper.

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

Mon code : Le premier est le code hors composant que j'ai ajouté à la page d'accueil du site Web.

<TabsWrapper>
      <Titre de l'onglet="Onglet 1">Bonjour 1</Tab>
      <Titre de l'onglet="Onglet 2">Bonjour 2 </Tab>
      <Titre de l'onglet="Onglet 3">Bonjour 3</Tab>
      <Titre de l'onglet="Onglet 4">Bonjour 4</Tab>
    </TabsWrapper>

Le second est le code à l'intérieur du composant responsable de TabsWrapper

<template>

  <div class="onglets">
    <div class="tab_header"></div>
    <ul class="tabs_header">
      <li
      v-for="titre dans tabTitres"
      :key="titre"
      @click="selectedTitle = titre"
      :class=" {sélectionné : titre ==Titre sélectionné}"
      >

        {{ titre }}
      ≪/li>
    </ul>
    <emplacement />
  </div>
</modèle>
<script>
importer { ref} depuis 'vue' ;
importer { fournir } depuis 'vue' ;
exporter par défaut{
    configuration(accessoires,{slots}){
        const tabTitles=ref(slots.default().map((tab)=> tab.props.title))
        const selectedTitle=ref(tabTitles.value[0])

        fournir("Titre sélectionné", Titre sélectionné)

        retourner{
            Titre sélectionné,
            ongletTitres,
            
        
        }
    }
}

</script>

Ce code obtient chaque titre de l'onglet

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

Ce code le rend

<li
      v-for="titre dans tabTitres"
      :key="titre"
      @click="selectedTitle = titre"
      :class=" {sélectionné : titre ==titre sélectionné}"
      >

        {{ titre }}
      </li>

J'ai essayé de répéter la même technique et cela a fonctionné, mais je pense qu'il existe une meilleure façon

<code>
    <div class="tab_header" v-for="headtitle in headTitles" :key="headtitle">{{headtitle}}</div>
    <ul class="tabs_header">
      <li
      v-for="titre dans l'ongletTitres"
      :key="titre"
      @click="selectedTitle = titre"
      :class=" {selected : title ==selectedTitle}"
      >

        {{ titre }}
      ≪/li>
    </ul>
    <emplacement />
  </div>
</modèle>
<script>
importer { ref} depuis 'vue' ;
importer { fournir } depuis 'vue' ;
exporter par défaut{
    configuration(accessoires,{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])

        fournir("Titre sélectionné", Titre sélectionné)

        retourner{
            Titre sélectionné,
            ongletTitres,
            titres de tête,
            
        
        }
    }
}

</script></code>

Answer 1

Vous pouvez simplement passer les props dans la balise script et y accéder directement en utilisant ce mot-clé et le nom de la prop.

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

Dans une balise de modèle comme celle-ci

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

Vous n'avez pas besoin d'utiliser ref, vous pouvez simplement utiliser v-for directement et parcourir les éléments du tableau.

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