Vue 3.0 -5 slot

摘要

slot用來將組件定義插槽使用，可將組件的插槽內容，由上層元件(呼叫層)所決定顯示的內容，分為三種 (1) 默認插槽: 默認組件插入的位置 (2) 具名插槽:插入具名的插槽 (3) 作用域插槽:由父組件來決定顯示的樣式

例如:提供圖片使用可以命名為useImage；

默認插槽

• 我們利用slot將商品內容，可以根據我們需要擺放資料格式來擺放

• 這是商品的圖卡，支援文字、圖片、影像，將slot顯示內容

檔案路徑: slot\Category.vue

<template>
    <div class="category">
        <h2>{{ title}}</h2>
        <slot></slot>

    </div>
</template>

<script setup lang="ts" name="category">
    defineProps(["title"])
</script>

<style scoped>

.category{
    background-color: aqua;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    margin: 0px 10px 0px 10px;
    width: 200px;
    height: 300px;
}

h2{
    background-color: orange;
    text-align: center;
    font-size: 18px;
    font-weight: 800;    
}

</style>

檔案位置: Product.vue

 <template>
    <div>
        <h3>商品列表</h3>
        <div class="list">
            <Category title="商品一">
                <ul>
                    <li v-for="g in games" :key="g.index">{{g.name}}</li>
                </ul>
            </Category>
            <Category title="商品二">
                <img :src="imageUrl" width="80%"/>
            </Category>
            <Category title="商品三">
                <video :src="videoUrl" controls width="80%"></video>
            </Category>
        </div>

    </div>
 </template>
 
 <script setup lang="ts" name="product">
    import { reactive,ref } from 'vue';
    import Category from './slot/category.vue';

    let games = reactive([
        {index:1, name:"火影忍者"},
        {index:2, name:"鬼滅之刃"},
        {index:3, name:"魂斗羅"}
    ])

    let imageUrl = ref("https://thumb.ac-illust.com/0c/0c3c64e631df8b99256cf6de8fa8f12f_t.jpeg") ;
    let videoUrl  = ref("https://www.youtube.com/watch?v=OJqFW5psz4Y")
 </script>
 
 <style scoped>
    .list {
        display: flex;
        justify-content: space-evenly;
        
    }
 </style>

---

具名插槽

既有名字的slot

• 定義插槽的名字 ，Product2.vue為需要取代組件的slot內容，使用(1) (2) 可以在這兩個位置中宣告。也是有寫法用井號#也是表示插槽例如:#content

檔案位置:slot\NamedCategory.vue

<template>
    <div class="category">
        <!-- 具名插槽 差異-->
        <slot name="title"></slot>
        <slot name="content"></slot>
    </div>
</template>

<script setup lang="ts" name="category">
    defineProps(["title"])
</script>

<style scoped>

.category{
    background-color: aqua;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    margin: 0px 10px 0px 10px;
    width: 200px;
    height: 300px;
}

h2{
    background-color: orange;
    text-align: center;
    font-size: 18px;
    font-weight: 800;    
}

</style>

檔案位置:Product2.vue

 <template>
    <div>
        <h3>商品列表</h3>
        <div class="list">
            <Category>
                <template v-slot:title>
                    <h2>遊戲列表</h2>
                </template>
                <template #content >
                    <ul>
                        <li v-for="g in games" :key="g.index">{{g.name}}</li>
                    </ul>
                </template>
            </Category>
        </div>
    </div>
 </template>
 
 <script setup lang="ts" name="product">
    import { reactive } from 'vue';
    import Category from './slot/NamedCategory.vue';
    let games = reactive([
        {index:1, name:"火影忍者"},
        {index:2, name:"鬼滅之刃"},
        {index:3, name:"魂斗羅"}
    ])

 </script>
 
 <style scoped>
    .list {
        display: flex;
        justify-content: space-evenly;
        
    }
 </style>

作用域插槽

作用域子組件只是做相關參數的設定，最後顯示個格式需要由父組件

檔案位置:slot\RegionCategory.vue

<template>
    <div class="category">
        <!-- 作用域插槽-->
        <slot :list="games"></slot>
    </div>
</template>

<script setup lang="ts" name="category">
import { reactive } from 'vue';

    let games = reactive([
        {index:1, name:"火影忍者"},
        {index:2, name:"鬼滅之刃"},
        {index:3, name:"魂斗羅"}
    ])

 </script>
 
<style scoped>

.category{
    background-color: aqua;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    margin: 0px 10px 0px 10px;
    width: 200px;
    height: 300px;
}

h2{
    background-color: orange;
    text-align: center;
    font-size: 18px;
    font-weight: 800;    
}

</style>

檔案位置:Product2.vue

 <template>
    <div>
        <h3>商品列表</h3>
        <div class="list">
            <RegionCategory>
              <template v-slot="params">
                <ul>
                    <li v-for="y in params.list">
                        {{ y.name}}
                    </li>
                </ul>
              </template>
            </RegionCategory>

            <RegionCategory>
              <template v-slot="params">
                <ol>
                    <li v-for="y in params.list">
                        {{ y.name}}
                    </li>
                </ol>
              </template>
            </RegionCategory>

            <RegionCategory>
              <template v-slot="params">
                    <h3 v-for="y in params.list">
                        {{ y.name}}
                    </h3>
              </template>
            </RegionCategory>

        </div>
    </div>
 </template>
 
 <script setup lang="ts" name="product">
import RegionCategory from './slot/RegionCategory.vue';


 </script>
 
 <style scoped>
    .list {
        display: flex;
        justify-content: space-evenly;
        
    }
 </style>