Vue.js

【Vue.js】コンポーネントを使ってみよう

更新日：

Vueを触り始めるにあたりまずはコンポーネントを使ってみましょう。今回は、コンポーネントの説明、使い方、少し作り込んでいきます。

コンポーネントとは？

コンポーネントとは、機能やレイアウトなどを一つにまとめた部品のことです。
例えば、ボタンというコンポーネントを作成していきます。そのボタンコンポーネントに色は青、カーソルを載せると水色になどの情報を持たせます。
そうすることで、ページ内でボタンが複数でてきたとしても、そのコンポーネントを配置することで、ボタンを複数回作成する必要がなくなります。

Vueのコンポーネントを作ってみる

前回の記事(https://blog.freamap.co.jp/vue-cli-3-gui/)で作成したプロジェクトにボタンコンポーネントを作成していきます。

ファイル作成

ボタンコンポーネントのファイルとして、componentsフォルダに「Button.vue」ファイルを作成します。

ファイル内容の記述

作成したButton.vueの内容を記述していきます。
Vueファイルは大きく分けて三つのタグで構成されています。

  • テンプレートタグ
  • スクリプトタグ
  • スタイルタグ

vueファイルでは以下のようになります。

<template>
  // コンポーネントのHMTLやVueのテンプレート構文を記述
</temlate>
<script>
  // コンポーネント内で使用する処理や関数を記述
</script>
<style>
  // コンポーネントのcssを記述
</style>

まずはテンプレートタグのみを使用してコンポーネントを作成します。
以下のような内容を記述します。

<template>
  <button>Buttonコンポーネント</button>
</template>

「<template></template>」で囲われている中にButtonを準備しました。

コンポーネントを利用する

プロジェクト作成時に作成されているHome.vueでボタンを使っていきます。
Vueではテンプレートタグで使用するComponentをスクリプトタグでimportして使用していきます。
作成時にHelloWorldコンポーネントを読み込んでいるので同じように記述していきます。
コードを以下のように変更します。(HelloWorldに関する部分は削除してます)

<template>
  <div class="home">
    <Button />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/Button.vue';

@Component({
  components: {
    Button,
  },
})
export default class Home extends Vue {}
</script>

コードを確認していきます。
まずは、9行目で先ほど作成したボタンコンポーネントをimportします。
13行目でimportしたButtonをテンプレートで使用するための記述をします。
あとは、このButtonをテンプレートタグ内の好きな場所に書くと、そこにボタンコンポーネントが表示されます。
実際の表示結果です。

Buttonタグを二つ書けば二つ表示されます。

コンポーネントを作り込む

このままではボタンが表示されているだけなので、ボタンコンポーネントを作り込んでいきます。

レイアウト調整

まずはレイアウトを調整します。
とりあえず、色やhoverの設定をしていきます。
Button.vueを以下のように修正します。

<template>
  <button>Buttonコンポーネント</button>
</template>

<style scoped lang="scss">
button {
  height: 48px;
  background-color: white;
  color: blue;
  border: solid 1px blue;
  border-radius: 2px;
  padding: 0 24px;
  cursor: pointer;

  &:hover {
    background-color: blue;
    color: white;
  }
}
</style>

表示結果をみてみます。

使用しているボタンに色をつけることができました。

テキストを外部から指定できるように修正する

ボタンのテキストの「Buttonコンポーネント」となっている部分を外部から指定できるようにします。
slotタグを使用すると子要素をそこに表示するようにすることができます。
Button.vueのテンプレートタグ内を以下のように修正します。

<template>
  <button>
    <slot/>
  </button>
</template>

次に使用している側で子要素を追加します。
Home.vueのテンプレートタグを以下のように修正します。
わかりやすいのでボタンを二つ準備してます。

<template>
  <div class="home">
    <Button>button1</Button>
    <Button>button2</Button>
  </div>
</template>

結果をみてみます。

Buttonタグ内で子要素に指定したテキストが表示されました。

ボタンクリック時のイベントを取得

vueではclickイベントを取るためには、「v-on」を使用します。
Button.vueのbuttonに対してイベントハンドリングを設定していきます。
Button.vueのテンプレートタグを以下のように修正します。

<template>
  <button v-on:click="$emit('click')">
    <slot/>
  </button>
</template>

$emit(イベント名)でコンポーネントからイベントを親要素へイベントを渡すことができます。
今回は親要素にクリックイベントを伝えたいのでイベント名に「click」を記述しました。

次は、Buttonを使用している親要素のHome.vueにイベントを追記していきます。
イベントで発火するメソッドを準備しなければならないので、methods内に「onClick」メソッドを準備します。
methodsについては後々調べるとして、以下のようにHome.vueを変更します。

<template>
  <div class="home">
    <Button v-on:click="onClick">button1</Button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/Button.vue';

@Component({
  components: {
    Button,
  },
})
export default class Home extends Vue {
  private onClick() {
    alert('クリック');
  }
}
</script>

実際にボタンを押してみます。

クリックイベントを親要素で取得することができました。

まとめ

コンポーネントを簡単ではありますが使用してみました。
次はコンポーネント内に記述する処理やデータなどについて調べていきます。

-Vue.js

Copyright© freamap ブログ , 2025 All Rights Reserved.