スロット (slot)
参考:
スロットによるコンテンツ配信 – コンポーネントの基本 — Vue.js [公式]
使い方
親レベルでテンプレートの内容がコンパイルされ、子コンポーネントのスロットにコンテンツとして配信される。
参考:
Vue.js Component Slot によるコンテンツ配信とハマりどころ – Qiita
Vue.jsで親テンプレートから子テンプレートに表示するコンテンツを制御する – 俺、サービス売って家買うんだ
1分でわかるVue.jsのslotの使い方(サンプル付き) | iwb.jp
デフォルトのスロットコンテンツ
親からコンテンツが提供されていた場合、デフォルトコンテンツを置き換えます。
<button type="submit"> <slot>Submit</slot> </button>
参考:
デフォルトのスロットコンテンツ – スロット — Vue.js [公式]
名前付きスロット
コンポーネントのテンプレートで slot 要素に name 属性を指定する
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
template 要素に slot 属性を指定する
<base-layout> <template slot="header"> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot="footer"> <p>Here's some contact info</p> </template> </base-layout>
または、任意の要素に slot 属性を指定する
<base-layout> <h1 slot="header">Here might be a page title</h1> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </base-layout>
参考:
slot-scope
参考:
Vue.js の scoped slot の理解 – kitak’s blog
スコープ付きスロット – スロット — Vue.js [公式]
slot-scope の分割代入 – スロット — Vue.js [公式]
slot-scope – API — Vue.js [公式]
Getting Your Head Around Vue.js Scoped Slots – DZone Web Dev
scopedSlots を子コンポーネントに v-bind する
参考:
Ability to pass scoped slots to descedants in templates · Issue #7178 · vuejs/vue – GitHub
スロットからイベントを emit する
参考:
Is it possible to emit event from component inside slot · Issue #4332 · vuejs/vue – GitHub
Vue で子コンポーネントに対してイベントを付与したい(107138)|teratail
スロットだけを描画するコンポーネント
参考:
Renderless Components in Vue.js | Adam Wathan
Duplicate presence of slot
参考:
Allow a single slot to be rendered for multiple times · Issue #8496 · vuejs/vue – GitHub
再描画
参考:
Update slot content without rerendering rest of component · Issue #6351 · vuejs/vue – GitHub