【Vue.js】v-slotについての個人的まとめ①

はじめに

個人的な学びを軽く書き留めているだけの記事です。

v-slot

呼び出し側から呼び出し元のcomponentをカスタマイズできる機能。

まず下記のように<slot></slot>で挟む形でデフォルト値にしたいHTMLを書いて親側で呼び出してみる。

ChildComp.vue

<template>
  <div>
    <slot><h1>ほげ</h1></slot>
  </div>
</template>

ParentComp.vue

<template>
  <div>
    <ChildComp></ChildComp>
  </div>
</template>

この場合、ParentComp側では単にChildCompを呼び出しているだけなのでChildComp側ではデフォルト値に設定されている「ほげ」がブラウザ上に表示されている。

v-slotを利用してChildCompの内容をカスタムしてみる。

App.vue

<template>
  <div>
    <ChildComp>
      <h1>hoge</h1>
    </ChildComp>
  </div>
</template>

上記のようにChildCompへカスタマイズしたい内容を追加する。

結果としてデフォルト値に設定している「ほげ」は「hoge」へ差し代わってブラウザへ表示されていることが確認できる。

名前付きスロット

slotには名前をつけてターゲットを明確にすることもできる。

ChildComp.vue

<template>
  <div>
    <slot name="hoge">
      <h1 class="hoge">ほげ</h1>
    </slot>
    <slot>
      <h1 class="default">デフォルト</h1>
    </slot>
    <slot name="fuga">
      <h1 class="fuga">ふが</h1>
    </slot>
  </div>
</template>

ParentComp.vue

<template>
  <div>
    <ChildComp>
      <template slot="hoge">
        <h1 class="hoge">hoge</h1>
      </template>
      <h1 class="default">default</h1>
    </ChildComp>
  </div>
</template>

ChildCompには name="hoge" といった属性と、 ParentCompのには slot="hoge" のようにtemplateで指定した名前をつけることでカスタマイズの対象を明示的に示すこともできる。
名前をつかない場合はdefaultとして扱われ、名前をつけていないslotの箇所へ反映がされる。
何も設定しなかった場合はChildCompの内容がそのまま反映される。

その②へ続く