文 / 西打藍 Siddharam
組件化設計
vue 在進行組件（component）化設計時，有很多種方式可以讓組件更有彈性，而 vue slot 就是其中一種。
slot 可以讓你在父層，在來決定組件中某塊區域的長相。就像是在拼圖中間挖空一塊，讓每位拼圖創作者自由在其中揮灑色彩。
我分享兩種自己常用的作法分享：
vue slot
首先是最簡單實用的例子，也就是挖空。
// bread-crumb 組件
// 在組件中挖空
<template>
<div class="bread-crumb">
<slot></slot>
</div>
</template>
// 父層
// 使用組件時就能塞入元素
<bread-crumb>
<h1>我是填空物</h1>
</bread-crumb>
// 結果如下
<div class="bread-crumb">
<h1>我是填空物</h1>
</div>
第二種是具名插槽（Named Slots），你可以命名多個 slot 在組件中，想要將元素放在指定 slot 位置時，只需要加上其命名就可以了。
// bread-crumb 組件
// 在組件中挖空 slot 並命名為 header
<template>
<div class="bread-crumb">
<slot name="header"></slot>
</div>
</template>
// 父層
// 使用 slot 時取名，就能使用
<bread-crumb>
<h1 slot="header">我是 header</h1>
</bread-crumb>
// 結果如下
<div class="bread-crumb">
<h1>我是 header</h1>
</div>
每次要選擇抽出樣式，還是挖空 slot 時都很苦惱，兩者沒有絕對，只能看網站整體設計來做判斷。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com