VueのSlotがいつも良くわからなくなるので良く使う使い方についてまとめました。
なお、Nuxt2系とVuetifyを使っています。
基本的な情報は公式ドキュメントを参照して下さい。
https://v2.ja.vuejs.org/v2/guide/components-slots
Slotとはコンポーネントに任意の埋め込みをする機能です。
コンポーネント化したけれど、この部分だけは変えたい。そういう時に使います。
この記事がわかりやすかったです。
https://qiita.com/aLiz/items/d5e41b4cff9a81856715
細かな使用方法はこの記事がわかりやすかったです。
https://zenn.dev/kokota/articles/242d9ae4aeae71
一番シンプルな使い方です。
埋め込みたい箇所を<slot />とすることで、コンポーネント使用時に埋め込みたいものを渡すことができます。
“`Label.vue
<template>
<div>
<p class=”label”>{{ label }}</p>
<slot />
</div>
</template>
“`
“`user-profile.vue
<Label label=”名前”>
<p>名無しの権平</p>
</Label>
<Label label=”ホームページ”>
<a href=”http://example.html”>http://example.html</a>
</Label>
“`
Vuetifyのコンポーネントをカスタマイズするときはslotを使うことが多いです。
例えば、v-data-tableのnameカラムのヘッダーだけ赤色にしたいときは以下のようにします。
“`table.vue
<v-data-table :items=”items” :headers=”headers”>
<template #[`header.name`]=”{ header }”>
<span style=”color: red;”>{{ header.text }}</span>
</template>
</v-data-table>
“`
なお、#[`header.name`]の#はv-slot:の省略系である。
また、”{ header }”は分割代入している。
つまり、省略せずに書くと以下のようになる。
“`table.vue
<v-data-table :items=”items” :headers=”headers”>
<template v-slot:[`header.name`]=”props”>
<span style=”color: red;”>{{ props.header.text }}</span>
</template>
</v-data-table>
“`
#[`header.name`]の括弧やバッククォテーションの部分はslot名に.(ピリオド)が使用されている場合の特殊な書き方。
詳しくはこの記事がわかりやすかったです。
https://zenn.dev/kokota/articles/242d9ae4aeae71
また、v-data-tableのslotは他にも色々あるので、詳しくは公式ドキュメントを参照して下さい。
https://v2.vuetifyjs.com/ja/api/v-data-table/#slots
入会申込
ログイン
