vue slot 插槽：使用教學

文 / 西打藍 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 時都很苦惱，兩者沒有絕對，只能看網站整體設計來做判斷。

閱讀量次

聯絡與合作

有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。

或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。

Email: frank@siddharam.com