Vue.jsのcomponentの使い方をサンプルを使って解説

課題を持った人

コンポーネントって何？コンポーネントを使うと効率的に開発できるって聞いたんだけど、どうやって使うの？

こういった要望に答えます。

筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。

この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。

1 コンポーネントとは？
2 コンポーネントを作成しよう
3 コンポーネントを使おう

コンポーネントとは？

Vue.jsではアプリケーションで再利用するものをコンポーネント(部品)として登録することができます。コンポーネント化することで、何度も同じコードを書く必要がなくなるので、見通しが良くなり、保守性も高まります。

説明だけだとピンとこないと思いますので、具体的にコンポーネントの使い方について以下で解説します。とても便利な機能なので、ぜひ覚えましょう。

コンポーネントを作成しよう

コンポーネントの作成は簡単です。srcディレクトリの中にあるcomponentsディレクトリ内に.vueファイルを作成することでコンポーネントとして利用できるようになります。

今回は、ページの見出しをコンポーネント化してみましょう。

componentsディレクトリに「Heading.vue」というファイルを追加します。

Heading.vueを開いて以下のコードを書きましょう。

<template>
<div id="heading">
  <h1>{{ heading }}</h1>
</div>
</template>

<style lang="sass" scoped>
#heading
  border-bottom: 1px solid #ddd
  border-top: 1px solid #ddd
h1
  color: #f00
</style>

<script>
export default {
  props: {
    heading: {
      type: String,
      default: 'No Heading',
      required: true
    }
  }
}
</script>

<h1>{{ heading }}</h1>

</div>

</template>

#heading

border-bottom: 1px solid #ddd

border-top: 1px solid #ddd

color: #f00

</style>

export default {

props: {

heading: {

type: String,

default: 'No Heading',

required: true

}

</script>

.vueファイルは単一ファイルコンポーネントといいます。単一ファイルコンポーネントは、template、style、scriptの3つのブロックで構成されています。

templateにはhtmlを、styleにはcssを、scriptにはJavaScriptを書きます。

styleブロックの開始部分に「lang=”sass”」とあるように、lang属性でcssのプリプロセッサを指定することができます。「lang=”scss”」と指定するとscssが使えます。また、scoped属性を追加することで、独立したスコープを持たせることができます。独立したスコープとはこのファイルで書いてあるstyleが他のファイルに影響を与えないようにすることです。

scriptブロックにある「export default {}」は定型文のようなものです。中に書かれているpropsオブジェクトはコンポーネントを使うために重要なものです。後ほど説明します。

コンポーネントを使おう

srcディレクトリ内のviewsディレクトリの中にあるAbout.vueから作成したコンポーネントを利用してみましょう。

About.vueを以下のように編集します。

<template>
  <div class="about">
    <Heading :heading="'About This Web Site'"></Heading>  // ③
  </div>
</template>

<script>
import Heading from '@/components/Heading.vue'  // ①

export default {
  components: {
    Heading  // ②
  }
}
</script>

<Heading :heading="'About This Web Site'"></Heading> // ③

</div>

</template>

import Heading from '@/components/Heading.vue' // ①

export default {

components: {

Heading // ②

}

</script>

つぎのような画面が表示されれば成功です。

コンポーネントを使う手順は以下です。

scriptブロック内で、使いたいコンポーネントをimportする
importしたオブジェクトをcomponentsに登録する
templateブロック内で使用する
→Heading要素内にある「:heading」(v-bind:headingと同義)という属性を使って、コンポーネントにテキストを渡しています。

③の動きを少し詳しく見てみましょう。

コンポーネントを呼び出す側のファイルを親コンポーネントと呼びます。反対に呼び出される側のファイルは子コンポーネントと呼びます。今回の場合は、親コンポーネントはAbout.vue、子コンポーネントはHeading.vueということになります。

親コンポーネントから子コンポーネントへデータを渡すには、propsオプションを利用します。Heading.vueの以下の部分がpropsオプションの設定です。

props: {
  heading: {               // 親から受け取る属性名 
    type: String,          // StringやObjectなどのデータ型
    default: 'No Heading', // デフォルト値
    required: true         // 必須かどうかの真偽値
  }
}

props: {

heading: { // 親から受け取る属性名

type: String, // StringやObjectなどのデータ型

default: 'No Heading', // デフォルト値

required: true // 必須かどうかの真偽値

}

今回の例では親コンポーネント側(About.vue)で「:heading=”‘About This Web Site'”」と指定しているので、子コンポーネント側(Heading.vue)のpropsオプションに指定しているheadingで「About This Web Site」という文字列を受け取っています。