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

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

比較相近的應用就只有 blockextend 的語法,但是在使用上卻又一些落差

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

Facebook 功能: