Ich weiß nicht, wie man in Vue Js veränderbaren Text für wiederverwendbare Komponenten erstellt

Question

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

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

Lassen Sie dann diesen Header den Text in diesem Div ändern, das der Hauptheader der TabsWrapper-Komponente ist.

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

Mein Code: Der erste ist der Out-of-Component-Code, den ich der Homepage der Website hinzugefügt habe.

<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>

Der zweite ist der Code innerhalb der Komponente, die für TabsWrapper

verantwortlich ist.

<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>

Dieser Code ruft jeden Titel aus dem Tab

ab.

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

Dieser Code rendert es

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

        {{ Titel }}
      </li>

Ich habe versucht, dieselbe Technik zu wiederholen und es hat funktioniert, aber ich denke, es gibt einen besseren Weg

<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>

Answer 1

您可以简单地在脚本标签中传递道具，并使用此关键字和道具名称直接访问它们。

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

在这样的模板标签中

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

您不需要使用 ref 您可以直接使用 v-for 并循环遍历数组元素。

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