不僅父組件可以通過插槽方式訪問并控制子組件傳入的數據，而且可以控制傳入父組件時插槽的名稱，從而使不同的插槽根據名稱的不同，使用場景也不同，例如在一個小區(qū)詳細頁中，可以根據小區(qū)類型，調用不同名稱的詳細頁插槽，這種插槽就是動態(tài)插槽。

接下來，結合一個完整的實例，來演示使用動態(tài)插槽，實現一個tab選項卡的功能。

實例7-6 動態(tài)插槽應用

1. 功能描述

在一個父組件中，添加一個子組件，子組件中是各種不同名稱的slot插槽，當點擊父組件選項卡標題時，就選中了一個插槽的名稱，則在內容中，顯示對應名稱的插槽。

2. 實現代碼

在項目的components 文件夾中，添加一個名為“Parent”的.vue文件，該文件的保存路徑是“components/ch7/part6/”，在文件中加入如清單7-13所示代碼。

代碼清單7-13 Parent.vue代碼

<template><ul><li :key="index" v-for="item,index in tabs" :class="{ 'focus': index == sIdx }" @click="clk(item.sName, index)">{{ item.title }}</li></ul><child><template #[sName]><div class="content">{{ tabs[sIdx].content }}</div></template></child>
</template>
<script>
import Child from "./Child.vue"
export default {data() {return {tabs: [{sName: "s1",title: "新聞",content: "新聞內容很豐富"}, {sName: "s2",title: "熱點",content: "熱點事件也不少"}, {sName: "s3",title: "圖片",content: "圖片資訊更精彩"}],sName: "s1",sIdx: 0}},methods: {clk(n, i) {this.sName = n;this.sIdx = i}},components: {Child}
}
</script>
<style scoped>
ul {padding: 0;margin: 0;list-style: none;display: flex;justify-content: space-around;width: 300px;border: solid 1px #ccc;
}ul>li {padding: 8px;cursor: pointer;width: 84px;text-align: center;
}ul .focus {background-color: #ccc;font-weight: 700;
}.content {width: 260px;border: solid 1px #ccc;border-top: none;padding: 20px;
}
</style>

在父組件中，導入子組件 Child.vue文件，它的功能是為父組件提供各類名稱的模板，父組件根據slot插槽的name屬性值就可以動態(tài)加載，它的代碼如清單7-14所示。

代碼清單7-14 Child.vue代碼

<template><div v-for="(item, index) in names" :key="index"><slot :name="item"></slot></div>
</template>
<script>
export default {data() {return {names: ["s1","s2","s3"]}}
}
</script>

3. 頁面效果

保存代碼后，頁面在Chrome瀏覽器下執(zhí)行的頁面效果如圖7-7所示。

4. 源碼分析

在本實例的子組件Child源碼中，向父組件提供了多個不同name的slot插槽，供父組件中template元素使用，使用的方法是在模板中添加#符號，符號后面是slot插槽的名稱，由于該名稱是一個動態(tài)的變量sName，因此需要使用[]方括號進行包裹。

在父組件中，當用戶點擊某個導航欄選項時，在單擊事件中獲取到對應的slot插槽名稱和索引號，則將前者傳給變量sName，使父組件中template元素替換sName名稱的插槽;后者傳給變量sIdx，通過sIdx值獲取到對應的數組內容，并顯示在插槽中。