コンポーネントを読み込む/呼び出す/表示する【Vue.js】

2020年4月23日 00:05

★コンポーネントとは？

機能ごとにHTML/JavaScript/CSSをセットしたパーツが入った箱の様なモノ
例）ナビゲーション・ユーザー情報などを「それぞれ1つのファイル(部品)」にして「独立したコンポーネント」とする事ができる
詳しくはこちら　https://note.com/mg_rry/n/nbc872528cc1d

作業工程（やることは4つ）

①コンポーネントを作成 (Footerを作る場合)
→例）componentフォルダ内にFooter.vueという名前のファイルを作成
②コンポーネントを読み込む
→import 変数名 from ' コンポーネントの格納場所 '
例）import Footer from '~/component/Footer.vue'
③コンポーネントを呼び出す
→export default { components: { 変数名 } }
例）export default { components: { Footer } }
④コンポーネントを表示させたい場所に記述する
→<変数名 />
例）<Footer />
※詳しくは以下に続く・・・

例）Footerのコンポーネントを作成し、Pagesフォルダのindex.vue（ページのURLと連動しているファイル）で読み込む場合
↓　　↓　　↓　　↓　　↓　

①コンポーネントを作成（Footer.vueに記述）

componentフォルダ内にコンポーネントファイルを作成
例）Footer.vue

//Footer.vue内に記述

<template>
<div class="footerWrap">Footerの内容（HTML部分）</div>
</template>
<style>
.footerWrap { 
font-size: 20px;
}
</style>

②コンポーネントを読み込む（index.vueに記述）

作った部品( コンポーネント)は、読み込んで使わなければならない！
上記で作成したコンポーネントを読み込みたいファイルに以下を記述
<script>の中に、import 変数名 from ' コンポーネントの格納場所 '

//例）Pagesフォルダのindex.vueで読み込む

<script>
//コンポーネントフォルダのFooter.vueを読み込む設定
import Footer from '~/components/Footer.vue'
</script>

③コンポーネントを呼び出す（index.vueに記述）

コンポーネントは読み込んだだけでは、使えない！
読み込んだ後に、呼び出す事で使えるようになる。
export default{ }の中に、components: { importで定義した変数名 }
※export defaultの説明は、ページ下部へ

//例）Pagesフォルダのindex.vueで呼び出す

<script>
//コンポーネントフォルダのFooter.vueを読み込む設定
import Footer from '~/components/Footer.vue'

// 読み込んだ from コンポーネントを使えるように呼び出す設定
export default {
 components: { 
　　Footer
　}
};
</script>

④コンポーネントを表示させたい位置に記述する（index.vueに記述）

テンプレート内の表示させたい位置に<Footer />と記述する

//例）Pagesフォルダのindex.vueに記述

<template>
<h1>タイトルタイトル</h1>
<div class="contentWrap">
 <div>コンテンツコンテンツ</div>
</div>
<div class="footerWrap">
  <Footer />
</div>
</template>

export defaultとは

export default { }で囲む事で、外部からも参照できる
※単一ファイルコンポーネント(拡張子が.vue)は、外部からも参照できることが前提の仕組みなので、export default { }で囲むのが基本の使い方。
最初のうちは、決まり事として覚えればOK！
※exportは、呼び出すこと

（補足）
コンポーネントを他のコンポーネントで呼び出せる
例）Footer.vue（コンポーネント）をTop.vue(コンポーネント)で呼び出す

//Footer.vue（コンポーネント）

<script>
export default {
　name: "Footer",
　data( ) {
　　　return{
　　　　　massage: "フッターです！"
　　　　}
　　} 
}
</script>

// Top.vue(コンポーネント)

<template>
<div class="contentWrap">
 <p>テキストテキスト</p>
</div>
<div class="footerWrap">
  <Footer />
</div>
</template>

<script>
import Footer from '~/components/Footer.vue'

export default {
    name: 'Top',
    components: {
          Footer
     }
}
</script>

ひとまず以上。