<p>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</p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>Kemudian biarkan pengepala ini menukar teks di dalam div ini, yang merupakan pengepala utama komponen TabsWrapper. </p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>Kod saya: Yang pertama ialah kod luar komponen yang saya tambahkan pada halaman utama tapak web. </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Kod ini mendapat setiap tajuk daripada Tab</p> <pre class="brush:php;toolbar:false;"><Tab title="Tab 1">Hello 1</Tab></pre> <p>Kod ini menjadikannya</p> <pre class="brush:php;toolbar:false;"><li v-for="tajuk dalam tabTajuk" :key="tajuk" @click="selectedTitle = tajuk" :class=" {selected: title ==selectedTitle}" > {{ tajuk }} </li></pre> <p>Saya cuba mengulangi teknik yang sama dan ia berkesan, tetapi saya rasa ada cara yang lebih baik</p> <p> <pre class="snippet-code-html lang-html prettyprint-override"><code> <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 = 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 headTitles=ref(slots.default().map((tab)=>tab.props.headtitle)) const selectedTitle=ref(tabTitles.value[0]) sediakan("selectedTitle", selectedTitle) kembali{ Tajuk terpilih, tabTajuk, tajuk tajuk, } } } </skrip></kod></pra> </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>