【vue】slotの使い方、コンポーネントに個別の要素を追加

今回は、slotの追加方について解説を行って行きます。

slotはどのようなとき使うのか？

大枠のデザインは同じだけど、ちょっとだけ要素が違うとかのときに使うことが多い印象です！

要素だけではなく、コンポーネントもslotを使うことによって、追加することが可能です。

今回はリンクのコンポーネントを作成します。

その中に画像があるものと、ないものの要素を出力するコードを書いていきます。

環境とバージョンについて
slotの使い方
1. SampleSlot.vue
2. slot.vue
slotでコンポーネントを呼出す方法
1. sample.vue
2. slot.vue
まとめ

環境とバージョンについて

mac OS 11.2.3
エディタ　VSCode
node v14.8.0
- https://nodejs.org/ja/
npm 6.14.7
- https://www.npmjs.com/

nuxtでpugを使う方法については下記を参考にしてください。

nuxt.jsにpugをインストールする方法

Nuxt.jsにpugをインストールする方法について解説します。

slotの使い方

SampleSlot.vue

components/SampleSlot.vue

<template lang="pug">
  .sample-slot
    a(:href="url" class="nav-link")
      slot
  </template>
  <script>
  export default {
    props: {
      url: {
        type: String,
        default: null,
      },
    },
  }
  </script>

コンポーネントを描画する時、 <slot></slot> は「Your Profile」に置換されるでしょう。スロットには HTML を含む任意のテンプレートを入れることが出来ます

slot.vue

pages/slot.vue

<template lang="pug">
  .page-slot
    SampleSlot(url="/profile")
      p Your Profile
  </template>

slot部分がp Your Profileになります。

slotでコンポーネントを呼出す方法

まずは呼出すためのコンポーネントを作成します。

sample.vue

<template lang="pug">
  .sample
    h1 サンプル
  </template>

上記で作成した、コンポーネントを先程のslot.vueのテンプレート内で呼び出してみましょう。

slot.vue

pages/slot.vue

<template lang="pug">
  .page-slot
    SampleSlot(url="/profile")
      p Your Profile
      sample // ここに追加
  </template>

コレだけで、slotを使っている部分にコンポーネントを追加することができました。

まとめ

slotは使う場面によって、要素が異なるときなどに、使うことが多いです。

また、ストットにはデフォルト値のようなものを設定することができるので、指定師な場合はデフォルトを表示舌入り、指定したときにはその指定した要素を表示させることができます