關於 Slot 元件插槽

什麼情況下會用到Slot?

之前學習到的元件，我們知道元件可以重複使用並且運用props傳入不同資訊。
而使用props的有很嚴格的父層子層規範。子元件控制HTML內容，而父元件傳入不同的資料。
現在要認識的Slot跟這個概念相似但是又更好用了!Slots也可以讓我們重複運用元件，並直接用父元件控制子元件的內容。

基本運用

Greet-Component

<template>
    <div>
        <slot>Default Hello<slot/>
    </div>
<template>
<script>
export default{
    name: 'greet'
}
</script>

App-component

<template>
    <greet/>
    <greet>你好!</greet>
</template>
<script>
    import greet form './component/greet.vue(路徑)'

    export default {
        component: {greet}
    }
</script>

Named Slot

CodePen 練習

card-Component

<template>
    <div>
        <slot name="header">Default header<slot/>
    </div>
    <div>
    //可以留一個沒有命名的，就會試default
        <slot>Default content<slot/>
    </div>
    <div>
        <slot name="footer">Default footer<slot/>
    </div>
<template>
<script>
export default{
    name: 'card'
}
</script>

App-component

<template>
    <card>
        //若是命名的Slot，需要用 template。用v-slot指定名稱。
        <template v-slot:header> CARD HEADER</template>
        //其中沒有命名的slot，就會變default
        <template v-slot:default>CARD BODY</template>
         //若是命名的Slot，需要用 template。可以用 # 簡寫。
        <template #footer>CARD FOOTER</template>

    </card>
</template>
<script>
    import card form './component/card.vue(路徑)'

    export default {
        component: {card}
    }
</script>

Slot Props

Slot Props 可以藉由Slot除送資料到父元件。
範例練習:
namelist元件中有名單資要要傳除去，我們同時希望父元件利用Slot Props操作資料。

namelist-Component

<template>
    <p v-for="name in names" :key="name.firstname">
        <slot :firstname="name.firstname"  :lastname="name.lastname"></slot>
    </p>
<template>
<script>
export default{
    name: 'namelist',
    data(){
        return{
            names:[
                {firstname: 'Bruce',lastname: 'Wayne'},
                {firstname: 'Clark',lastname: 'Kent'},
            ]
        }
    }
}
</script>

App-component

<template>
   <namelist>
       <template v-slot:default="slotProps">
           {{slotProps.firstname}} {{slotProps.lastname}}
       </template>
       <template v-slot:default="slotProps">
           {{slotProps.firstname}}
       </template>
   </namelist>
</template>
<script>
    import namelist form './component/namelist.vue(路徑)'

    export default {
        component: {namelist}
    }
</script>