VueコンポーネントのHTMLテンプレートを「継承」する方法

HTML, pug, SFC, Vue.js, Web

Vue.jsは根底にSFC(Single File Component)の思想があるため,コンポーネントの「継承」は本来なら想定外だ。

特にHTMLテンプレート部分の継承を考えるなら,普通にやろうとするとできない。

しかし,テンプレートはHTMLだけでなくpugでも記述できるため,pugの「ブロック」という機能を使えば「継承」のような作りが実現できる。

例えば,次のようなpugファイルを作ったとしよう。

このpugコードは,「test」という名前のブロックを持っているため,この部分に呼び出し側から色々な要素を入れ込むことができる。

例えば次のような要領でVueコンポーネントから使える。

使った感じはVueのスロット機能によく似ている。

しかし,VueのスロットはWebアプリが動作している間にもコンポーネントからは動的にスロット内の要素が参照され続けるが,pugのブロック機能はpugコードのコンパイル時に解釈され静的なHTMLコードが生成されるため,動的な動作を考えた場合両者はまったく異なる。

さらに,これはあくまでpugのブロック機能を使ったものなので,Vueのコンポーネント間の関係やコンポーネント内の構造にはまったく依存しない点が特徴だ。

Vueコンポーネント間の参照関係とは無関係なpugコードだけの参照関係を大規模に作り込むこともできる。

UIライブラリを作る場合なんかに有用な特徴かもしれない。「ボタンの基本テンプレート」やこれを派生させてつくった「重要ボタンのテンプレート」とか色々作れそうだし。

その代わり,開発者はVueコンポーネント間の参照関係に加え,pugコード間の参照関係にも注意を払う必要が生じるため,バグの埋め込みや保守性の崩壊にはくれぐれも注意したい。

HTML, pug, SFC, Vue.js, Web

Posted by もち