Vue公式チュートリアル 〜 部品にデータを渡す

Vue公式チュートリアル　〜　部品にデータを渡す

Vue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。

前回までのポイントは？

前回のステップでは、これまで学習に使っていたメインの部品（ページ）から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。

今回の学ぶのは？

今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。

なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。

例えば、ページの先頭に書く情報（ヘッダーと呼ばれる場合もあります）に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。

Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。

今回の変更前のコードです。

(App.vue)

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

  data() {

    return {

      greeting: "Hello from parent",

    };

  },

};

</script>

<template>

  <ChildComp />

</template>

今回のコードもここまででは、特に新しい所はありませんか？ 課題は、このメインの部品（ページ）で作った変数「greeting」を「ChildComp」に渡すように変更する事です。

一方で、作成した部品の「ChildComp」は、既に対応ができています。

(ChildComp.vue)

<script>

export default {

  props: {

    msg: String,

  },

};

</script>

<template>

  <h2>{{ msg || "No props passed yet" }}</h2>

</template>

データを呼び出し元（親）からデータを受け取るためポイントは、「props」です。 「export default {}」に「props:{}」を作成して、受け取るデータを書きます。これで受け取る準備は完了です。 「props:{}」で書いたデータは、部品の中で作成した変数と同じような感じで利用する事ができます。

ここでは、HTML の部分（template のタグの部分）で、「msg」と言う形で使っています。

<h2>{{ msg || "No props passed yet" }}</h2>

ここで少し新しい書き方が出てきました。

＊　msg がある場合（データを渡された場合）には、「msg」を表示します。

＊　msg がない場合（データが渡されていない場合）には、「"No props passed yet"」を表示します。

変更後のコードは？

では、変更後のコードです。

(App.vue)

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

  data() {

    return {

      greeting: "Hello from parent",

    };

  },

};

</script>

<template>

  <ChildComp :msg="greeting" />

</template>

変更点は、呼び出す部品の HTML の記述に、部品の中で「受け取るデータとして書いた」変数の名前を「:msg="greeting"」のように記述して、呼び出し元の変数名と受け取り側の変数名を結びつけるようにすると完了です。今回の学習のポイントはこれだけです。

データは、受け取り側で受け取るように記述すれば幾つでも、渡す事ができます。

一応「ChildComp.vue」のコードも載せておきますが、最初のコードからの変更はありません。

(ChildComp.vue)

<script>

export default {

  props: {

    msg: String,

  },

};

</script>

<template>

  <h2>{{ msg || "No props passed yet" }}</h2>

</template>

今回の応用は？

このステップの学習は、何か難しいような感じもしますが、実はとてもシンプルでした。

応用編もそれほど難しくありませんが、以下の二つをやってみてください。

別の部品を作って呼び出してみてください。

その新しい部品には、二つのデータを渡してください。

データが渡されない場合の表示を例題と同じように表示できるようにしてください。

呼び出し元は、一つは、両方のデータを渡す形で呼び出してください。

呼び出し元は、もう一つ、同じ部品を一つのデータは渡して、もう一つはデータを渡さないで呼び出してください。

応用編の実装例です。 新たに、「first」と「second」のデータを作成して、作成した部品「Comp2」を２回呼び出しています。

（App.vue)

<script>

import ChildComp from "./ChildComp.vue";

import Comp2 from "./Comp2.vue";

export default {

  components: {

    ChildComp,

    Comp2,

  },

  data() {

    return {

      greeting: "Hello from parent",

      first: "最初のデータ",

      second: 777,

    };

  },

};

</script>

<template>

  <ChildComp :msg="greeting" />

  <Comp2 :data0="first" :data1="second" />

  <Comp2 :data1="second" />

</template>

こちらが新たに作成した部品「Comp2.vue」です。 一つのデータは文字列（String）もう一つのデータは数字（Number）にしてみました。

(Comp2.vue)

<script>

export default {

  props: {

    data0: String,

    data1: Number,

  },

};

</script>

<template>

  <h2>Data0: {{ data0 || "data0は渡されていません" }}</h2>

  <h2>Data1: {{ data1 || "data1は渡されていません" }}</h2>

</template>

「ChildComp.vue」は変更はありません。 同じ事の繰り返しなので、簡単ですね！他にも色々アレンジして試してみてください。 実際に、コードを書いて結果を見る事が大切です。

まとめ

今回のステップでは、作成した Vue の部品を呼び出す際にデータを部品に渡すやり方を学習しました。

部品にデータを渡して、受け取る仕組みを作ることで部品をより色々な場面で利用しやすくすることができます。 やり方自体はシンプルですが、幾つか自分で部品を作って実際に使ってみることで、どのようにデータが伝えられていくかを実際に目で見て体験できます。 この体験がプログラミング学習の効果を高めてくれます。

いかに体験する機会を増やすかが、プログラミング学習で大切な事です。

次回は、2022 年 3 月 11 日にお届けします。