【Vue.js】Vueプロジェクトの中でカスタムコンポーネントを作成する

どうも。みずかず(@mizukazu_1)です。

今回はVue CLIを使って作成したプロジェクトの中でカスタムコンポーネントを作る方法を書いていきます。

ページを作成する際にコンポーネントは必須ですが、自作のコンポーネントを作って使いたい場合もありますよね。

作成の方法はすごく簡単なのでサクッと覚えられると思います。

カスタムコンポーネントを作成する場所

Vue CLIでプロジェクトを作成するとsrcフォルダの中にcomponentsというフォルダがあると思います。

そちらに自作のカスタムテンプレートを格納します。

こんな感じですね。
デフォルトだとHelloWorld.vueというコンポーネントが入っているはずです。

templateにはコンポーネントを構成するためのHTMLタグを、styleにはCSSを書きます。

scriptには以下の記述をします。

nameプロパティでコンポーネントの名前を設定します。
ここでは「text-area」という名前を付けたのでこのカスタムコンポーネントを使用する際には「<text-area></text-area>」というタグを使用します。

export default {
  name: 'text-area'
}

必要に応じてpropsなどを設定しますがここでは割愛します。

実際に使用するにはViewの中でカスタムコンポーネントをimportする必要があります。

Home.vueで先ほど作成した「text-area」というコンポーネントを使いたいとするとHome.vueのscriptの中に以下の記述を書きます。

import TextArea from '@/components/TextArea.vue'

export default {
  name: 'Home',
  components: {

    TextArea
  }
}

これでHome.vueの中で<text-area></text-area>というタグが使用できるようになります。

注意点としてはタグ名はカスタムコンポーネントのnameプロパティに設定したものになります。

Home.vueのTextAreaはあくまでもコンポーネントを読み込むために使うものです。

以上の3点を抑えておけば問題ありません。

もし作り方に迷ったらプロジェクトを作成した際にsrc/componentsの中にHelloWorld.vueというコンポーネントがあるのでそれを見ながら真似して作ると上手くいきます。

Vue.jsの概要についてよく分からない方は以下の記事もオススメです。