我不知道如何在 Vue Js 中為可重複使用元件建立可變更的文本

Question

我正在透過觀看教學創建一個可重複使用的選項卡元件。看完之後，我明白了它是如何運作的。但是，對於我的項目，我需要建立標題包含可以更改的標題的選項卡，因為這是一個可重複使用的元件，所以我必須更改每個新選項卡的每個標題的標題，但我還沒有弄清楚如何做吧。我需要以某種方式從我添加到頁面的元件 TabsWrapper 取得標題

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

然後讓此標題更改此 div 內的文本，該 div 是 TabsWrapper 元件的主標頭。

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

我的程式碼： 第一個是我加入到網站主頁的元件外程式碼。

<TabsWrapper>
      <Tab title="Tab 1">Hello 1</Tab>
      <Tab title="Tab 2">Hello 2 </Tab>
      <Tab title="Tab 3">Hello 3</Tab>
      <Tab title="Tab 4">Hello 4</Tab>
    </TabsWrapper>

第二個是負責TabsWrapper的元件內部的程式碼

<template>

  <div class="tabs">
    <div class="tab_header"></div>
    <ul class="tabs_header">
      <li
      v-for="title in tabTitles"
      :key="title"
      @click="selectedTitle = title"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ title }}
      </li>
    </ul>
    <slot />
  </div>
</template>
<script>
import { ref} 從 'vue';
import { provide } from 'vue';
export default{
    setup(props,{slots}){
        const tabTitles=ref(slots.default().map((tab)=> tab.props.title))
        const selectedTitle=ref(tabTitles.value[0])

        provide("selectedTitle", selectedTitle)

        return{
            selectedTitle,
            tabTitles,
            
        
        }
    }
}

</script>

這段程式碼從 Tab 中取得每個標題

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

這段程式碼呈現

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

        {{ title }}
      </li>

我嘗試重複相同的技術，但它成功了，但我認為還有更好的方法

<code> <div class="tabs">
    <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 = title"
      :class=" {selected: title ==selectedTitle}"
      >

        {{ title }}
      </li>
    </ul>
    <slot />
  </div>
</template>
<script>
import { ref} 從 'vue';
import { provide } from 'vue';
export default{
    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)

        return{
            selectedTitle,
            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>