はじめに

こんにちは！大ちゃんの駆け出し技術ブログです。

今月は主なアウトプットとしてvueを題材にしたものを書きます

大体が短いアウトプットで終わると思うので、いつもみたいな長い記事ではないかなと思います。

基本的な用途

本記事ではslotについて紹介します。

slotはかなり特徴的な書き方をするのかなと個人的に思っております。

slotの機能ですが一言で言うと

「親コンポーネント側で指定した値を挟み込む」

となります！

まずは簡単なコードを見ていきましょう。

最初にコンポーネントの作成ファイルを見ていきます

slotを使用したコードサンプルが以下のようになります。

// slot/js/slot.js
Vue.component("slot-practice", {
  template: `<div>start:   [<slot></slot>]   :finish</div>`,
});

new Vue({
  el: "#app",
});

slot-practiceというコンポーネントを作成しています。

templateの中は極めてシンプルな作りでdivタグの中に今回の題材であるslotタグがあるだけです。「start: [」、「] :finish」はただの文字列です。この後説明する挟み込まれていることをわかりやすくするために書いています。

htmlコードは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>slot-practice</title>
  </head>
  <body>
    <div id="app">
      <slot-practice></slot-practice> <!-- 注目 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/slot.js"></script>
  </body>
</html>

親コンポーネントを配置しただけとい感じですね。

ここで実際に表示される画面をブラウザ上で確認します。

特に何も起こっていませんね。

では冒頭で述べたslotの要約を思い出して実装します。

「親コンポーネント側で指定した値を挟み込む」

親コンポーネントのタグの間で挟み込みたい文字を記述します。どんな文字でもOKです！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>slot-practice</title>
  </head>
  <body>
    <div id="app">
      <slot-practice>挟まれた！</slot-practice>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/slot.js"></script>
  </body>
</html>

もう一度ブラウザで確認しましょう。

まさに親コンポーネントで指定した値が挟み込まれたといった感じです。

このように、親コンポーネントのタグの間で記述した文字を子コンポーネントのslotタグの箇所に表示することがslotの機能です。

つまり、

親コンポーネントのタグ間で文字を記述

<slot-practice>挟まれた！</slot-practice>

↓

子コンポーネントのslotタグの箇所に挟み込まれる

<div>start:   [<slot></slot>]   :finish</div>

↓

<div>start:   [挟まれた！]   :finish</div>

このようにして<slot></slot>の箇所が置換されるのです！

名前付きスロット

少し発展して名前付きスロットという物も紹介しておきます。

挟み込みたい文字が複数あった場合とかに使用できます。

上述したコンポーネントのtemplateの中で複数箇所に挟み込みたい文字があったとします。

例えばheaderタグを用意してみます。

Vue.component("slot-practice", {
  template: `<div>
    <header>
      <slot></slot>
    </header>
    <div>start:   [<slot></slot>]   :finish</div>
  </div>`,
});

new Vue({
  el: "#app",
});

先ほどと同じhtmlファイルのままでブラウザを確認します。

2つのslotタグが両方とも同じ文字で挟み込まれました。

ここまでは先ほどのおさらいですね。

ここで、headerタグの中にあるslotと先ほどのdivタグの中のslotには違う文字を入れたいとします。

しかし、この時親コンポーネントからは複数の値を指定することができません。

その場合に使う機能が名前付きスロットです。

JSファイルに名前付きスロットを導入します。

Vue.component("slot-practice", {
  template: `<div>
    <header>
      <slot name="header"></slot>
    </header>
    <div>start:   [<slot name="middle"></slot>]   :finish</div>
  </div>`,
});

new Vue({
  el: "#app",
});

slotタグにname属性を付け加えているといった感じですね。

親コンポーネント側では記述方法を少し変えます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>slot-practice</title>
  </head>
  <body>
    <div id="app">
      <slot-practice>
        <template v-slot:header>
          ヘッダーを挟み込む
        </template>
        <template v-slot:middle>
          ミドルを挟み込む
        </template>
      </slot-practice>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/slot.js"></script>
  </body>
</html>

slot-practiceのコンポーネントの中にtemplateタグを2度使用しています。そして、タグにはv-slot:<コンポーネントのslotのname属性>を指定しています。

<slot-practice>
  <template v-slot:header>
    ヘッダーを挟み込む
  </template>
  <template v-slot:middle>
    ミドルを挟み込む
  </template>
</slot-practice>

これにより、v-slotで指定したname属性を持つslotの場所に挟み込みたい文字が表示されます。

表示される画面は以下のとおりです。

以上のようにtemplateタグを同一コンポーネント内で分けて使用し、name属性を明示することで、表示させたいslotタグの箇所に意図した文字を挟み込むことが可能となります！

終わりに

slotはよく使われるとRUNTEQで教えられてたので上手に使えるようにしておきたいですね。

こんな感じで今月は短いアウトプットを多めにしようかなと思いますのでよろしくお願いいたします。

以上、大ちゃんの駆け出し技術ブログでした！

大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

【Vue】slot

はじめに

基本的な用途

名前付きスロット

終わりに