スロット (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