【Nuxt.js/Vue.js】コンポーネント化する方法

コンポーネント化とは

直書きしたコードをコンテンツごとに部品として分けてファイルを作成する事をコンポーネント化という。

何のためにコンポーネント化するのか

直書きしたコードが1つのファイルに並んでいると、可読性下がり、そうなると運用効率も下がるので、コンテンツごとにコンポーネント化して、コードの可読性や運用効率を高める

コンポーネント化の利点

①可読性が高くなる
→ベースになるファイルに、コンポーネント化したファイルを読み込んで呼び出すだけでなので、ファイルの見た目がスッキリする。
②運用効率が上がる
→修正が発生しても、該当箇所を特定しやすい
→共通して複数ページで表示させているコンテンツもコンポーネント化しておけば、修正が1箇所で済む
※共通部品を作る時の予備知識として、以下の記事を参考用に貼っておきます。

コンポーネント化の手順

例）共通部品として使用する頻度が高い、ヘッダーやフッターをコンポーネント化してみる
※共通部品を作る時の予備知識として、以下の記事を参考用に貼っておきます。

①以下のdefault.vueに直書きしたコードを、コンポーネント化してみる

<template>
 <div>
   <nuxt />
//ここから
   <div class="footerWrap">
     <p>フッター1</p>
　　　<p>フッター2</p>
　　　<p>フッター3</p>
   </div>
//ここまでをコンポーネント化
 </div>
</template>

②Footer.vueを作成してFooter部分をこちらに移動する

<div class="footerWrap">
     <p>フッター1</p>
　　　<p>フッター2</p>
　　　<p>フッター3</p>
   </div>

③default.vueにFooter.vueを読み込んで呼び出す
③-1まずはJS部分
1.Footer.vueを読み込む
import 変数名 from コンポーネントの格納場所
2.Footer.vueを呼び出す
export default { components: { 変数名 } }

<script>
//Footer.vueを読み込む
import AppFooter from '~/components/Footer.vue'

//Footer.vueを呼び出す
export default {
 components: {
   AppFooter
 }
}
</script>

③-2次にHTML
読み込みたい場所にFooter.vueを設定する
<小文字の変数名 />
【注意】HTMLに設定する際は、小文字で記述する。複数単語を組み合わせている場合は、「-」で区切る
AppFooter → <app-footer />

//HTML
<template>
 <div>
   <nuxt />
　　//読み込みたい場所にFooter.vuを設定する
   <app-footer />
 </div>
</template>


<script>
//Footer.vueを読み込む
import AppFooter from '~/components/Footer.vue'

//Footer.vueを呼び出す
export default {
 components: {
   AppFooter
 }
}
</script>