スロット (slot)

参考:

スロット — Vue.js [公式]

スロットによるコンテンツ配信 – コンポーネントの基本 — 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>

参考:

名前付きスロット – スロット — Vue.js [公式]

slot – API — Vue.js [公式]

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

feat(core): support passing down scopedSlots with v-bind by yyx990803 · Pull Request #7765 · 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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です