Saya tidak tahu cara membuat teks boleh tukar untuk komponen boleh guna semula dalam Vue Js

Question

Saya sedang mencipta komponen tab boleh guna semula dengan menonton tutorial. Selepas menontonnya, saya faham bagaimana ia berfungsi. Walau bagaimanapun, untuk projek saya, saya perlu mencipta tab dengan tajuk yang boleh ditukar kerana ini adalah komponen yang boleh diguna semula jadi saya perlu menukar tajuk untuk setiap tab baharu tetapi saya belum mengetahuinya. Ketahui caranya. Saya perlu mendapatkan tajuk daripada komponen TabsWrapper yang saya tambahkan pada halaman

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

Kemudian biarkan pengepala ini menukar teks di dalam div ini, yang merupakan pengepala utama komponen TabsWrapper.

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

Kod saya: Yang pertama ialah kod luar komponen yang saya tambahkan pada halaman utama tapak web.

<TabsWrapper>
      <Tajuk tab="Tab 1">Helo 1</Tab>
      <Tab tab="Tab 2">Helo 2 </Tab>
      <Tajuk tab="Tab 3">Hello 3</Tab>
      <Tajuk tab="Tab 4">Hello 4</Tab>
    </TabsWrapper></pra>
<p>Yang kedua ialah kod di dalam komponen yang bertanggungjawab untuk TabsWrapper</p>
<pre class="brush:php;toolbar:false;"><template>

  <div class="tab">
    <div class="tab_header"></div>
    <ul class="tabs_header">
      <li
      v-for="tajuk dalam tabTajuk"
      :key="tajuk"
      @click="selectedTitle = tajuk"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ tajuk }}
      </li>
    </ul>
    <slot />
  </div>
</template>
<skrip>
import { ref} daripada 'vue';
import { provide } daripada 'vue';
eksport lalai{
    persediaan(props,{slot}){
        const tabTajuk=ref(slots.default().map((tab)=> tab.props.title))
        const selectedTitle=ref(tabTitles.value[0])

        sediakan("selectedTitle", selectedTitle)

        kembali{
            Tajuk terpilih,
            tabTajuk,
            
        
        }
    }
}

</script>

Kod ini mendapat setiap tajuk daripada Tab

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

Kod ini menjadikannya

<li
      v-for="tajuk dalam tabTajuk"
      :key="tajuk"
      @click="selectedTitle = tajuk"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ tajuk }}
      </li>

Saya cuba mengulangi teknik yang sama dan ia berkesan, tetapi saya rasa ada cara yang lebih baik

    
{{headtitle}}
    

      


        {{ tajuk }}
      
    
    
  

Answer 1

Anda hanya boleh menghantar prop dalam tag skrip dan mengaksesnya terus menggunakan kata kunci ini dan nama prop.

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

Dalam tag templat seperti ini

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

Anda tidak perlu menggunakan ref anda boleh terus menggunakan v-for dan gelung pada elemen tatasusunan.

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