JavaScript

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

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

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

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

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

コンポーネントとは?

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

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

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

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

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

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

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

.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を以下のように編集します。

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

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

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

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

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

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

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

筆者
筆者
このように、コンポーネントは外部の値に応じて、処理を変更することができます。うまく使うと保守性の高いコーディングが可能になります。ぜひ、使ってみてください。