Vue

【Vue.js 2.9】Vueプロジェクトで行うはじめての単一ファイルコンポーネント

  /

・複雑なHTMLのコンポーネントを見やすくする方法
・Vue-CLIで作成したプロジェクトで利用

はじめに

今回はVue.jsの単一ファイルコンポーネントの紹介です。
コンポーネントの紹介ではHTMLはtemplate内に記載しましたが複雑なHTMLを書く場合には可読性が落ちるためその場合は単一ファイルコンポーネントを使います。

【Vue.js 2.9】はじめてのVue.js コンポーネント ・コンポーネントの定義方法紹介・コンポーネント名の注意事項 はじめに 今回はコンポーネントについてコンポーネントの使い方、...

単一ファイルコンポーネントとは

上記で記載した通り、コンポーネントにはViewのテンプレートがあります。
簡単なHTMLタグの記載でしたらtemplate内に直接記載しても良いのですが、複雑であり複数行のHTMLタグの場合は可読性が極端に落ちます。

それらを回避するために拡張子「.vue」ファイルを作り、その中にHTMLタグを下記そのファイルを呼び出すようにすればViewの変更もHTMLの知識がある方でも修正が容易になります。

注意点としてはNPMなどのビルド環境が無いと単一ファイルコンポーネントは使えません。
今回はVue-CLIで作成したプロジェクトをもとに説明しています。

【Vue.js 2.9】Vue.js CLI の環境構築（Dockerとdocker-compose使用） ・Dockerを使ったVue.jsの環境構築の紹介 はじめに Railsの学習も一区切り付いたのでVue.jsの学習を始め...

環境情報

名前詳細
Vue.js開発バージョン（https://unpkg.com/vue/dist/vue.js）
エディタVSCode（https://code.visualstudio.com/）

フォルダ構成

単一ファイルコンポーネントはtemplateで呼び出すファイルを新たに作ります。
フォルダ構成は以下となります。(関係ある部分のみをピックアップしています。）

vue-cli-project
└src
  ├components
  │└HelloComponent.vue
  └views
    └Home.vue

HelloComponent.vueファイルのテンプレート出力

実際に単一ファイルコンポーネントについて紹介します。
今回はHelloComponent.vueファイルを作り、その中にあるHTMLタグを呼び出します。

components/HelloComponent.vueファイル

<template>
	<div>
		<h1>ファイルからの呼び出し！</h1>
	</div>
</template>

<script>
</script>

<style scoped>
</style>

HelloComponent.vueファイルの中はHTMLタグのみです。
「template」タグで囲う必要があります。
scriptタグやstyleタグは不要であれば削除しても動作出来ます。

views/Home.vueファイル

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

<script>
// @ is an alias to /src
import HelloComp from '@/components/HelloComponent.vue'

export default {
  name: 'Home',
  components: {
    HelloComp
  }
}
</script>

正確にはHome.vueファイル自体も単一ファイルコンポーネントなのですがApp.vueやindex.htmlを直すことはまず無いのでHome.vueファイルに先ほど作成したHelloComponent.vueを呼び出しています。

importでVueファイルを呼び、componentsで定義しています。
定義名はファイル名に合わせる必要は無く、任意の名前をimport内で定義出来ます。
その定義した名前をcomponents内やタグで利用します。

実行結果

NPMでVueプロジェクトを作成しましたので「npm run serve」コマンドで実行します。

想定結果通り、「HelloComponent.vue」ファイルのタグ通り出力されました。

参考記事

公式ページ
https://jp.vuejs.org/v2/guide/single-file-components.html

RELATED POST