Vue.jsの基本的な実装方法2(Vueコンポーネントの作成・使用方法について)

はじめに

今回は、Vueコンポーネントの作成・使用方法について解説します。

Vueコンポーネントとは

• Vueコンポーネントは独立したUI部品で、ボタン、ナビゲーションバー、フォームなどのウェブアプリケーションのさまざまなUI要素を表します。

• Vueコンポーネントは再利用可能なUI部品で、アプリケーション内の複数の場所で同じコンポーネントを使用できます。

Vueコンポーネントの作成方法

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <p>Hello Wordl!</p>
</template>

<script>
// コンポーネントとして他のファイルからインポート可能にするために定義する
export default {
  // コンポーネントの名前を設定する
  name: 'HelloWorld',
};
</script>

• export default は、このファイルがVueコンポーネントであることを示し、他のファイルでこのコンポーネントを利用できるようにします。

• name プロパティはコンポーネントの名前を指定します。この名前はデバッグ時や親コンポーネント内でこのコンポーネントを参照する際に使用されます。今回は「HelloWorld」という名前を設定しています。

Vueコンポーネントの呼び出し方

./App.vueのコードを以下のように修正します。

<template>
  <!-- 開始終了タグ形式 -->
  <HelloWorld></HelloWorld>

  <!-- 省略形式 -->
  <HelloWorld />

  <!-- パスカルケース -->
  <HelloWorld />

  <!-- キャメルケース-->
  <helloWorld />

  <!-- ケバブケース-->
  <hello-world />
</template>

<script>
// 作成したコンポーネントをインポートする
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  // インポートしたコンポーネントを登録する
  components: {
    HelloWorld,
  },
};
</script>

以下のように表示されます。

• 作成したコンポーネントはインポートし、componentsプロパティに登録することで使用することができます。

• <HelloWorld></HelloWorld>: このようにしてテンプレート内で呼び出すことができます。

• <HelloWorld />: このように省略して記述ができます。

• <HelloWorld />: パスカルケースで記述ができます。

• <helloWorld />: キャメルケースで記述ができます。

• <hello-world />: ケバブケースで記述ができます。

また、以下のように、子コンポーネント(HelloWorld.vue)の名前を親コンポーネント(App.vue)内で任意で指定できます。

<template>
  <hello />
</template>

<script>
// コンポーネントを任意の名前にしてインポートする
import Hello from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    // タグの名前を任意の指定して登録
    hello: Hello,
  },
};
</script>

以下のように表示されます。

• ./components/HelloWorld.vueをHelloという名前のコンポーネントとして登録しています。

• Helloコンポーネントをhelloという名前のカスタムタグと指定して使用します。(パスカルケースやキャメルケースなどは使用できない)

次回

次回は、データバインディングの方法について解説します。