如何在 pug 上實作 vue slot 的功能

slot 是 Vue 非常使用的功能,常常在做一些模組化的開發時都會去使用到,最近在使用 pug 開發一些靜態的頁面時,查看 pug 的官方文件,卻沒有相關的資訊 比較相近的應用就只有 block 與 extend 的語法

但是在使用上卻又一些落差,花了一點時間,尋找答案,發現是可以在 pug 上實作 slot 的

Mixin

mixin layout()
  - var slots = {};

  // general mixin slot
  mixin slot(name)
    - slots[name] = block

  block

  .layout
    if slots['header']
      .header
        - slots['header'](); 
    if slots['body']
      .body
        - slots['body']();
    if slots['footer']
      .body
        - slots['footer']();

使用方式

+layout()
  +slot('header')
    | header
  +slot('body')
    | body
  +slot('footer')
    | footer

參考連結

zhiwei. huang

zhiwei. huang