Vue 公式チュートリアル 〜 「部品」を呼び出す！

Vue 公式チュートリアル　〜　「部品」を呼び出す！

Vue の公式チュートリアル、ステップ 11 は、これまでは一つの大きな「部品」を扱ってきました。このステップでは、別の「部品」を作成して、呼び出すと言う使い方を学習します。どちらかというとこちらの方がよく使う方法です。

前回までのポイントは？

前回までは、メインの表示部分だけを作って、その「部品」を表示するという課題でした。 メインの表示部分の部品を作る基本を中心に、その書き方を学習してきました。これは、部品の作り方の基本をカバーしているので、別の部品を作る場合にも利用できます。

今回学習するのは？

今回学習するのは、新たに「別の部品」を作成して、「メインの表示部分で使う」やり方を学習します。

例によって、変更前のコードから見ていきましょう！今回は二つの部分に分かれています。 コードが表示されている右側の画面の上にファイルの名前が書かれています。 今回扱うのは、メインのページの部品の「App.vue」ともう一つの部品「ChildComp.vue」の二つです。

（App.vue）

<script>

export default {

  // register child component

};

</script>

<template>

  <!-- render child component -->

</template>

今まで学習してきた、「メインのページ」の「部品」です。 現時点では、基本的に何もない状態です。

（ChildComp.vue)

<template>

  <h2>A Child Component!</h2>

</template>

今回、新しく作成する、「部品」の方は、ステップ１で学習した内容に近い、文字を表示するだけのシンプルな物です。

ここまでは、新しい学習内容はありません。

このステップの課題は、この新しく作成した「部品」をメインのページに組み込む事です。

変更後のコードは？

では、変更後のコードです。新しく作成した「部品」の方は変更はありません。

(App.vue)

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

};

</script>

<template>

  <ChildComp />

</template>

メインのページの方は、幾つか新しいポイントがあります。 HTML の記述（template のタグの部分）は、シンプルです。

<template>

  <ChildComp />

</template>

シンプルに、新しく作成した部品を「呼び出す」だけです。

大きなポイントは、新しく作成した部品を使う準備を「Javascript」の方ですることです。

<script>

import ChildComp from "./ChildComp.vue";

export default {

  components: {

    ChildComp,

  },

};

</script>

ポイントは、二つです。

＊　新しい部品が「どのファイルにあるか」を「import」で書きます

＊　Javascript の「export default {}」の中で、表示で使う部品を「components: {}」で「登録」します。

この二つだけです。これで、新しく作成した「部品」で作った表示ができる様になります。

今回の応用は？

今回の応用は、「もう一つ」部品を作って、それをメインのページに組み込むというのをやってみてください。

＊　右上のファイル名の横にある「+」をクリックして、新しいファイルを作ります。

＊　新しいファイルの名前を「AnotherComp.vue」にします

＊　「h3」の HTML のタグを使って「別の部品」を表示する部品を作ります

＊　メインのページ「App.vue」で作成した「別の部品」を一番下に表示できるようにします。

と言う課題です。部品を作って登録するというやり方を自分自身でやってみてください。

(AnotherComp.vue)

<template>

  <h3>別の部品</h3>

</template>

(App.vue)

<script>

import ChildComp from "./ChildComp.vue";

import AnotherComp from "./AnotherComp.vue";

export default {

  components: {

    ChildComp,

    AnotherComp,

  },

};

</script>

<template>

  <ChildComp />

  <AnotherComp />

</template>

同じような考え方で、ステップ 11 の課題で作成した、「ChildComp.vue」から、応用編で作成した、「AnotherComp.vue」を呼び出す事もできます。

(ChildComp.vue)

<script>

import AnotherComp from "./AnotherComp.vue"

export default: {

  components:{ AnotherComp}

}

</script>

<template>

  <h2>A Child Component!</h2>

  <AnotherComp />

</template>

「App.vue」を変更しないで実行すると、「別の部品」が２回表示されるはずです。 最初の一回は、「ChildComp.vue」が呼び出しているもので、もう一つは、「App.vue」が呼び出している物です。

まとめ

今回は、Vue の表示を「部品」を使って行うやり方を学習しました。 よく使う表示や、共通の表示を行う部分は部品化すると、同じ記述を繰り返し書かないで済む為、開発が効率的に行われます。

実際に Vue を利用して Web 開発を行う場合も、複数の部品を組み合わせてページを構成する様な使い方をするのが基本です。部品化のやり方を覚えると、そうした実践的な Vue の使い方に近づくことができます。

読者の皆さんも是非ご自分で部品を作って表示させるという体験を沢山すると、要領が分かります。いろいろやってみてください！

次回は、2022 年 3 月 9 日にお届けします。お楽しみに！