Vue 的 slot 系列使用方法，頭一回在 Element-UI 這個模組上看見，覺得用法挺神奇的，於是便筆記一下個人對 slot 的理解，以及怎樣的場景會使用到。
核心概念
slot 可以分為匿名、具名以及包含資料的 Slot。
前兩者為：當父組件有在引用的子組件內寫模版<template>的話，那麼子組件就會將其內標註為 <slot></slot> 的地方，用父組件提供的模版表示。
帶有資料的 Slot 則是：父組件提供樣式，但是顯示的資料則是由子組件提供。換言之，這是一個簡易的方法讓父組件直接取得子組件內的資料，並將以顯示。這樣的話，就不必先請子組件將資料 $emit 到父層，然後父層接收之後再調用相關的 methods。
類型
匿名 Slot
一個 Component 裡面，只能有一個匿名插槽 (Slot)。Demo：https://codesandbox.io/s/brave-surf-99h0s
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*父層*/ <template> <div class="father"> <h3>Father.vue</h3> <child> //引用 child 元件 <div class="list"> <span>Item1</span> <span>Item2</span> <span>Item3</span> <span>Item4</span> <span>Item5</span> <span>Item6</span> </div> </child> </div> </template> /*子層*/ <template> <div class="child"> <h3>Child.vue</h3> <slot></slot> // 將 slot 裡的內容用 Father.vue 內的 <child></child> 之間的內容替換 </div> </template> |
具名 Slot
雖說一個 Component 裡面，只能有一個匿名插槽 (Slot)，但可以有多個具有名稱的 Slot。Demo：https://codesandbox.io/s/brave-surf-99h0s
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 父層 <template> <div class="father"> <h3>Father.vue</h3> <child> <div class="list" slot="up"> <span>Item1</span> <span>Item2</span> <span>Item3</span> </div> <div class="list" slot="down"> <span>Item1</span> <span>Item2</span> <span>Item3</span> <span>Item4</span> </div> <div class="list"> <span>Item1</span> <span>Item2</span> </div> </child> </div> </template> // 子層 <template> <div class="child"> <h3>Child.vue</h3> <slot name="up"></slot> <slot name="down"></slot> <slot></slot> </div> </template> |
帶有資料的 Slot
父組件提供樣式<template>，至於顯示的資料則由子元件提供。子元件在 slot 上綁定資料，父元件用 slot-scope 來接收，至於 slot-scope 的命名跟子元件沒有直接關聯。
Demo：https://codesandbox.io/s/brave-surf-99h0s
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//父層 <template> <div class="father"> <h3>Father.vue</h3> <child> <template slot-scope="country"> <p v-for="(item,i) in country.data" :key="i">{{item}}</p> </template> </child> </div> </template> //子層 <template> <div class="child"> <h3>Child.vue</h3> <slot :data="countryList"></slot> </div> </template> <script> export default { name: "child", data: function() { return { countryList: ["Taiwan", "USA", "UK", "Japan", "South Korea", "Singapore"] }; } }; </script> |
參考資料
其他 Vue.js 相關文章
[blogimove-CPC-TAG=vuejs-MODE=3]
按讚加入粉絲團
