今天是第二十八天，我想繼續分享一下Slots(二)

昨天我們有提到#默認內容，以昨天實作來說，由於我們沒有提供插槽內容在父組件，所以“Submit”便作為默認內容。
那當今天我們需要一種方式將多種插槽內容傳入各個指定插槽的入口， 那我們可以使用具名插槽。

• Named Slots 具名插槽

<template v-slot:plant>

</template>

這種帶 name 的插槽被稱為具名插槽，我們使用時需要一個含 v-slot 指令的 template 元素，並將目標插槽的名字傳給該指令。
v-slot 有相對應的縮寫#，因此上方範例可以簡寫為

<template #plant>

</template>

開始寫程式:

這裡是HTML的部分

<div id="app">
    <goods-box>
        <template #plant>
            <h1>flower</h1>
        </template>
        <template #vechile>
            <h1>car</h1>
        </template>
        <template #drink>
            <h1>cola</h1>
        </template>
    </goods-box>
</div>

這裡是JS的部分，

<script>
    const app = Vue.createApp({ });
    
    app.component('goods-box',{
        template:`
        <div class="container">
            <plant>
                <slot name="plant"></slot>
            </plant>
            <vechile>
                <slot name="vechile"></slot>
            </vechile>
            <drink>
                <slot name="drink"></slot>
            </drink>
        </div>
        `,
    })
    app.mount("#app");
</script>

執行結果

那當我把JS部分的vehicle改成其他名字像是drink

<vechile>
    <slot name="drink"></slot>
</vechile>
<drink>
    <slot name="drink"></slot>
</drink>

car就換成了cola

參考文件:
https://vuejs.org/guide/components/slots.html

https://cn.vuejs.org/guide/components/slots.html#slot-content-and-outlet

https://book.vue.tw/CH2/2-4-slots.html

Slots(二)就分享到這邊，我們第二十九天見。