<p>Ich erstelle eine wiederverwendbare Tab-Komponente, indem ich mir ein Tutorial anschaue. Nachdem ich es gesehen hatte, verstand ich, wie es funktioniert. Für mein Projekt muss ich jedoch Registerkarten mit einem Titel erstellen, der geändert werden kann, da es sich um eine wiederverwendbare Komponente handelt. Daher muss ich den Titel für jede neue Registerkarte ändern, aber ich habe es noch nicht herausgefunden. Finden Sie heraus, wie. Ich muss den Titel irgendwie aus der TabsWrapper-Komponente abrufen, die ich der Seite hinzugefügt habe</p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>Lassen Sie dann diesen Header den Text in diesem Div ändern, das der Hauptheader der TabsWrapper-Komponente ist. </p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>Mein Code: Der erste ist der Out-of-Component-Code, den ich der Homepage der Website hinzugefügt habe. </p> <pre class="brush:php;toolbar:false;"><TabsWrapper> <Tab title="Tab 1">Hallo 1</Tab> <Tab title="Tab 2">Hallo 2 </Tab> <Tab title="Tab 3">Hallo 3</Tab> <Tab title="Tab 4">Hallo 4</Tab> </TabsWrapper></pre> <p>Der zweite ist der Code innerhalb der Komponente, die für TabsWrapper</p> verantwortlich ist. <pre class="brush:php;toolbar:false;"><template> <div class="tabs"> <div class="tab_header"></div> <ul class="tabs_header"> <li v-for="Titel in tabTitles" :key="Titel" @click="selectedTitle = Titel" :class=" {selected: title ==selectedTitle}" > {{ Titel }} </li> </ul> <Steckplatz /> </div> </template> <script> import { ref} aus 'vue'; import { Provide } from 'vue'; Standard exportieren{ setup(props,{slots}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const selectedTitle=ref(tabTitles.value[0]) Provide("selectedTitle", selectedTitle) zurückkehren{ ausgewählter Titel, tabTitles, } } } </script></pre> <p>Dieser Code ruft jeden Titel aus dem Tab</p> ab. <pre class="brush:php;toolbar:false;"><Tab title="Tab 1">Hallo 1</Tab></pre> <p>Dieser Code rendert es</p> <pre class="brush:php;toolbar:false;"><li v-for="Titel in tabTitles" :key="Titel" @click="selectedTitle = Titel" :class=" {selected: title ==selectedTitle}" > {{ Titel }} </li></pre> <p>Ich habe versucht, dieselbe Technik zu wiederholen und es hat funktioniert, aber ich denke, es gibt einen besseren Weg</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="Titel in tabTitles" :key="Titel" @click="selectedTitle = Titel" :class=" {selected: title ==selectedTitle}" > {{ Titel }} </li> </ul> <Steckplatz /> </div> </template> <script> import { ref} aus 'vue'; import { Provide } from 'vue'; Standard exportieren{ 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) zurückkehren{ ausgewählter Titel, tabTitles, headTitles, } } } </script></code></pre> </p>

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

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

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