# v-Slot插巢 (4-7)
###### tags: `Vue`、`4. 元件`
2022.3.7

　　Slot插巢，指在元件內加入可供外部插入HTML區塊。

### 1. 插巢與插巢預設值

<oldmoon><slot>這是外部鍵入內容</slot></oldmoon>

<script>
    const App = Vue.createApp({
        data(){
            return{
                text:'這是內部資料'
            }
        }});

    App.component('oldmoon',{
        template:`<div class = "card" style = "wight:18rem">
            <div class="card-header"> <slot><slot></div>
            <div class="card-body"> </div>
            <div class="card-footer"> </div>
        </div>
        `
    });

    App.mount('#app')
</script>

### 2. 具名插巢(多個slot插巢)

<oldmoon>
    <template v-slot:header> 這是外部表頭內容</template>
    <template v-slot:default>這是外部未設表內容資料</template>
    <template v-slot:footder>這是外部表尾內容</template>
</oldmoon>

<script>
    const App = Vue.createApp({
        data(){
            text:'這是內部資料'
        }});

    App.component('oldmoon',{
        template:`
            <div class = "card" style = "wight:18rem">
                <div class="card-header"> <slot name="header"></slot> </div>
                <div class="card-body"> <slot>這是為命名Slot</slot> </div>
                <div class="card-footer"> <slot name="footder"></slot> </div>
            </div>
            `
    });

    App.mount('#app')
</script>

### 3. 具名插巢(縮寫) : 半形#

<oldmoon>
    <template #header> 這是外部表頭內容</template>
    <template #default>這是外部未設表內容資料</template>
    <template #footder>這是外部表尾內容</template>
</oldmoon>

<script>
    const App = Vue.createApp({
        data(){
            text:'這是內部資料'
        }});

    App.component('oldmoon',{
        template:`
            <div class = "card" style = "wight:18rem">
                <div class="card-header"> <slot name="header"></slot> </div>
                <div class="card-body"> <slot>這是為命名Slot</slot> </div>
                <div class="card-footer"> <slot name="footder"></slot> </div>
            </div>
            `
    });

    App.mount('#app')
</script>