Building a Reusable Tabs Component with Vue Slots ( youtube搜尋這個 )

連結 : 點我

兩個重點 Provide 和 Inject

App.vue程式碼

 <!--Tab select 三個欄位-->
 <TabToggle>
     <Tab title="TitleA">這邊欄位A</Tab>
     <Tab title="TitleB">這是欄位B</Tab>
     <Tab title="TitleC">這是欄位C</Tab>
 </TabToggle>

----------------------------------------

tabswrapper.vue程式碼

<template>

    <div class="tabs">
        <ul class="tabs_header">
            <li v-for="title in tabTitles" :key="title" @click="selectedTitle=title">
                <!--click按了就是 現在選的是哪一個title a b c哪一個-->
                {{title}}   <!--顯示有幾個li的tab select-->
            </li>
        </ul>
        <slot />   <!--把tab欄位顯示出來--->
    </div>

</template>

<script>

    import { ref, provide } from 'vue'

    export default {

        setup(props, { slots }) {
            const tabTitles = ref(slots.default().map((tab) => tab.props.title))  /*把有幾個tab title select的欄位 找出來 就是title A B C三個 這個tab要小寫 大寫會報錯*/
            const selectedTitle = ref(tabTitles.value[0]) /*這個是目前選擇的title*/

            provide("selectedTitle", selectedTitle)   /*這樣才知道 , 把目前選擇的select 也就是後面哪個的值 丟到 'selectTitle' 給tab vue使用*/
            /*return後面那個{號 要在上面 如果在下面 會報錯*/
            return {
                selectedTitle,
                tabTitles,
            }

        },
    }

</script>

----------------------------------------

tab.vue程式碼

<template>
        
    <div v-show="title==selectedTitleFinally">
        <slot />
    </div>

</template>

<script>

    import { inject } from 'vue'

    export default {

        props: ['title'],
        setup() {
            const selectedTitleFinally = inject('selectedTitle')   /*後面那個title應該是tabswrapper.vue 選了哪個的title 這個selectTitle是tabswrapeer的28行第一個那個 'selectTitle'  */
            return {
                selectedTitleFinally,
            }
        },

    }
    
</script>

--------------------------------------------

css那些沒貼 , 自己打一打

感謝網路高手