February 25, 2020

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




閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

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

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

Email: frank@siddharam.com