export defaultについて

Vue.jsを扱っていて、export defaultがよくわからなかったので調べてみました。

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

単一ファイルコンポーネントとは、コンポーネントを構成するtemplate、style、scriptを1つのVueファイルでまとめて管理することを言います。
機能ごとに「HTML」「CSS」と切り出すのではなく、部品ごとに切り出して管理し、それをだし分けることでUIを作成することができます。
単一ファイルコンポーネントの思想で作られたのがVueCLIです。

他のコンポーネントで利用できるようにするためには

それでは、単一ファイルコンポーネントの思想で、他のコンポーネントでも利用できるようにするためにはどうすればよいのでしょうか。
それは、 export default でメンバーを囲むことで、外部からも参照できるようにします。
単一ファイルコンポーネントでは外部から参照されることが前提の仕組みになるので、基本的にscriptの部分は export default で囲むことが前提となります。

<script>
export default {
    name: "Header",
    data() {
        return{
            msg2: "はじめまして"
        }
    } 
}
</script>

使う側（親となる）コンポーネントでは、インポートした上で、使うコンポーネントをまた export default で囲んで templateの中で使えるモジュールとします。

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'home',
  components: {
    Header
  }
}

</script>

scriptで export default で囲んでいるので、テンプレートでは Header を使うことが可能となります。

<template>
  <div class="home">
    <Header/>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="こんにちは"/>
    <h1>This is an about page <fa icon="user" /></h1>
  </div>
</template>

単一ファイルコンポーネントでは、関連するどちらのvueファイルでも export default が必要となります。