【初心者向け】Vue.jsでコンポーネントを使用してみよう。

なやむくん

Vue.jsを使ってコンポーネントってどうしたら使えるんですか…。

などの疑問や悩みを解決してまいります。

この記事ではVue.jsでコンポーネント機能について解説していきます。

初心者向けの記事となっていますので予めご了承ください。

Vue.jsの開発環境を構築しよう

まだVue.jsの開発環境を構築できていない方は以下の記事を参考にしつつ開発環境を構築してください。

環境構築できている人はスキップしてOKです。

コンポーネント機能を使ってみよう

実際にコンポーネント機能を使ってみましょう。

使い方はとても簡単です！

コンポーネントファイルを新規作成

それではまずコンポーネントとして使用したいVueファイルを作成します。

作成する箇所はsrcフォルダ内のcomponentsフォルダ内です。

今回はHelloWorld.vueというファイルを作成しました。

こちらを今回のコンポーネントファイルとして使用していきたいと思います。

みつた

ファイル名は任意でOKです！

現時点でのApp.vueは以下の記述です。

<script setup></script>

<template>
  <p>何も表示されていない状態です。</p>
</template>

<style scoped></style>

みつた

templateタグの中身が表示されます！

この状態でブラウザ上で表示確認を行うと以下のように表示されます。

みつた

文字通り何も表示されていない状態ですね。

それでは作成したコンポーネントファイルには以下のように記述します。

<script setup></script>

<template>
  <h1>Hello World</h1>
</template>

<style scoped>
  h1 {
    font-size: 36px;
  }
</style>

単純に「Hello World」とコードを記述しているシンプルなものになります。

それではこのコンポーネントファイルを呼び出して内容を表示させましょう。

コンポーネントファイルを呼び出す

コンポーネントファイルを使用する方法は簡単です。

App.vueに以下のコードを追加します。

<script setup>
  // 追加コード
  import HelloWorld from './components/HelloWorld.vue';
</script>

<template>
  <p>何も表示されていない状態です。</p>

  <!-- 追加コード -->
  <HelloWorld /> 
</template>

<style scoped></style>

これでファイル保存をすると、

もえるくん

コンポーネントファイルの内容が表示されましたね！

みつた

それでは追加したコードの解説をしていきます。

コード解説

それではコンポーネントファイルを呼び出す際に使用したコードを解説していきます。

<script setup>
  // 追加コード
  import HelloWorld from './components/HelloWorld.vue';
</script>

まずコンポーネントファイルをインポートする必要があるのでscriptタグ内にimport HelloWorld from './components/HelloWorld.vue';を記述しています。

これでコンポーネントファイルであるHelloWorld.vueを呼び出すことができました。

次にApp.vueのtemplateタグ内に以下のように記述しました。

<template>
  <p>何も表示されていない状態です。</p>

  <!-- 追加コード -->
  <HelloWorld /> 
</template>

templateタグ内の内容がページに表示されるので、この中に<HelloWorld />を追加しています。

<>内にファイル名を入れる形になります。

ちなみに今回はコードを省略していますが、以下のように記述しても同じく表示されます。

<!-- 追加コード -->
<HelloWorld></HelloWorld>