Vue 公式チュートリアル 〜 スロットの使い方？

Vue 公式チュートリアル　〜　スロットの使い方？

Vue の公式チュートリアルを使った、Web 開発の学習例もステップ１４まで来ました。このチュートリアルはこれで基本的に最後です。ステップ１４では、スロットの使い方を学習します！

前回までのポイントはポイントは？

これまでの学習をまとめると大きく分けて二つです。

＊　基本的な Vue の部品の記述方法

＊　Vue の部品の基本的な使用方法

です。基本的な Vue の基本的な記述方法は、メインのページでも、呼び出される側の「部品」でも同じでした。 基本は、HTML の部分で表示の基本的な構成を作って、Javascript で表示に使うデータを管理・処理します。これに加えて、CSS で表示の「飾り」をするという構成です。

これをベースに、HTML、Javascript、CSS の連携のやり方に加えて、部品を呼び出す方（親）と呼び出される部品側（子）の間でのデータのやり取りのやり方を学んできました。

これまでの、13 のステップで基本的な書き方をカバーして来ました。

こうした基本を改めて振り返っって見てください。

今回学ぶのは？

今回学ぶのは、「スロット」の使い方です。 「スロット」を使うと、部品の呼び出し元（親）から、「部品」（子）にデータを渡す事ができます。

まずは、変更前のコードを見てみます。

(App.vue)

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

  data() {

    return {

      msg: "from parent",

    };

  },

};

</script>

<template>

  <ChildComp></ChildComp>

</template>

この記述自体は、まだ特別な部分はありません。 普通に、部品「ChildComp」を呼び出しているだけです。 Javascript の部分で、「msg」という変数を作って、「'from parent'」というデータを設定していますが、このデータは特に使っていない状態になっています。

続いて「部品」の方の記述です。

(ChildComp.vue)

<template>

  <slot>Fallback content</slot>

</template>

「slot」というタグが使われている以外は特に新しい部分はありません。 このコードを実行すると、「Fallback content」が表示されます。

今回の課題は、部品の呼び出し元のデータ「msg」を「部品」に渡して、「from parent」を表示できるようにするのが目的です。

変更後のコードは？

では、変更後のコードを、見てみます。

まずは、部品を呼び出す側のコードです。

(App.vue)

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

  data() {

    return {

      msg: "from parent",

    };

  },

};

</script>

<template>

  <ChildComp>Message: {{ msg }}</ChildComp>

</template>

変更したのは一箇所だけです。

<ChildComp>Message: {{ msg }}</ChildComp>

「部品」のタグで、「Message: {{ msg }}」を囲んでいるだけです。 このタグで囲まれた部分が「スロット」と呼ばれる部分になって、この部分全体が「部品」に渡されます。

「部品側（子）」のコードには変更はありません。

(ChildComp.vue)

<template>

  <slot>Fallback content</slot>

</template>

要は、「slot」のタグで囲まれた部分に、呼び出し元（親）が指定したデータが埋め込まれて表示されるという仕組みです。部品側で最初に書いたデータ「Fallback content」は、上書きされるという仕組みです。

今回の応用は？

実は、私自身も、このチュートリアルをやってみるまで「スロット」を使ったデータの渡し方は知りませんでした！つまり、別の方法でも同じような事が実現できるので、特にこの機能を知らなくても問題はなかったという事です。

同じような記述を、これまでに学習した「props」を使っても実現できます。

ここでは、「スロット」を使わずに同じような機能を実現してみてください。

実装例です

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

  data() {

    return {

      msg: "from parent",

    };

  },

};

</script>

<template>

  <ChildComp :msg="msg" />

</template>

基本は同じです。 データは、「props」を使って渡しています。

<ChildComp :msg="msg" />

「部品側」の記述例です。 「props」を受け取る準備が必要です。「props」が渡されない場合には、「Fallback contents」を表示するようになっているのは、今回の公式チュートリアルのステップ１４と同じです。

<script>

export default {

  props: { msg: String },

};

</script>

<template>

{{ msg ? msg : "Fallback contents" }}

</template>

「部品」の記述を比べてみると、「スロット」を使った方がシンプルに書くことができる事がわかります。 ただし、同じような機能は、これまでに学習した「props」を使っても記述できることもお分かりかと思います。

まとめ

Vue の公式チュートリアルは、今回のステップ１４で一通りの学習は終了です。 今回学習した、「スロット」を使う方法は、便利な方法ですが、応用例で紹介した通り、この方法を知らなくても、これまでに学習した「props」を使えば実現できる事もわかりました。

Web 開発をする上で一番重要な事は、「必要な機能を実現する事」です。逆に言うと、全ての項目を理解する事は一番重要ではないと言う事です。よく利用する方法で代用が可能ならば、今回のような「スロット」の使い方は知らなくても、同じ機能が実装できます。実際に、私自身も、今回このチュートリアルを実際にやってみるまでは、存在自体を知りませんでした。それでも、実際の Web 開発で困ったことはありませんでした。

今回の学習方法のポイントは、「必要な事を優先して学ぶ」でした。

実際の開発では、まずよく使う項目を使えるようになることが最重要課題です。

そう考えると、この学習方法は初心者にはメリットがある方法だと言えます。

次回は、公式チュートリアルに加えて学習しておくと良い事を紹介する予定です。2022 年 3 月 16 日にお届け予定です。お楽しみに！