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

slot 是 Vue.js 非常使用的功能，常常在做一些模組化的開發時都會去使用到

最近在使用 pug 開發一些靜態的頁面時，查看 pug 的官方文件，卻沒有相關的資訊

比較相近的應用就只有 block 與 extend 的語法，但是在使用上卻又一些落差

花了一點時間，尋找答案，發現是可以在 pug 上實作 slot 的

使用 pug 的 mixin 實作 slot 的功能，範例如下:

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

參考資料： Multiple blocks in jade mixins?

Summary

Article Name

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

Description

slot 是 Vue.js 非常使用的功能，常常在做一些模組化的開發時都會去使用到最近在使用 pug 開發一些靜態的頁面時，查看 pug 的官方文件，卻沒有相關的資訊比較相近的應用就只有 `block` 與 `extend` 的語法，但是在使用上卻又一些落差花了一點時間，尋找答案，發現是可以在 pug 上實作 slot 的

Author

ZHI-WWI