如何在 pug 上實作 vue slot 的功能
2018-09-16 |
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