【Vue】import fromとexport defaultの使い方を実例で解説｜外部の.js&.vueファイルの読み込み。別ファイル間とのデータ・変数・関数の受け渡し（初心者向け、わかりやすい）

export defaultで何ができるのか？（メリット）

.vueファイルには「export default」という表記があります。

単にVueファイルの処理は「export default」の中に書くものだというように理解されている方も少なくありません。

ですが、この「export default」が何をしているのかを理解すると、次のようなことができます。

ここでは、そもそも「export default」とは何なのか？やそれぞれの方法を実例を踏まえて解説しています。

export defaultとは何か？

そもそも「export default」とは何なのかというと、外部でこのファイルを読み込むときに、「export default」で囲んだ部分を１つの処理として、読み込み先のファイルに渡すという処理になります。

Vueではなく、JavaScriptの記述です。

export defaultとimport fromの使い方

他の拡張子.vueや.jsファイルの「export default」で囲まれた部分を読み込むためには「import from」が必要となります。

外部ファイルの「export default」を読み込むときの「import from」は以下のように使います。

import モジュール名 from 'ファイルパス'

ファイルパスは相対パスで記述します。

モジュール名とファイル名は一致させる必要はありませんが、.vueファイルをコンポーネントとして読み込む場合は一致させるのが一般的です。

import Table from './Table.vue'

import Table from './Table'

import searchKw from '../library/kw_search.js'

import searchKw from '../library/kw_search'

コンポーネントとして.vueファイルを読み込める

ポイント

Vueでは.vueというファイルを１つのコンポーネントとして、他のファイルの中で呼び出すことができます。

呼び出す側の大本となる.vueを親コンポーネント、import fromで呼び出される側を子コンポーネントと呼びます。

なお、.vueファイルをimportするときは特殊で、export defaultの処理部分だけでなく、scriptタグの中や、templateタグの中、styleタグの中もまとめて１つのコンポーネントとして読み込みます。

使い方と実例

import fromで読み込む

親コンポーネントとなるParent.vue、同じ階層にあるChild.vueを子コンポーネントとして読み込む場合は以下のようになります。

import Child from './Child'

上記はモジュール名にファイル名と同じ「Child」を使っていますが、別の名前でも問題ありません。

パスの部分は.vueを省略しています。「./Child.vue」と同じです。「./」は現在のファイルと同じ階層であることを示す相対パスです。

全体的なコードは以下のようになります。

<template>
  省略
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
}
</script>

<style scoped>
  省略
</style>

コンポーネントとして登録する

.vueファイルをインポートしただけではコンポーネントとして使えません。

Vueの領域の中で、読み込んだファイルをコンポーネントとして登録する必要があります。

export defaultの中に、componentsオブジェクトを作成し、その中にモジュール名を記述します。

<script>
import モジュール from 'ファイルパス'

export default {
  components: {
    モジュール名
  }
}
</script>

componentsの中に記述したモジュール名が子コンポーネント名になります。

これで、親コンポーネントの中で、呼び出した子コンポーネントが指定した、モジュール名をコンポーネント名として登録されます。

  components: {
    HelloVue
  }

  components: {
    HelloVue : HelloVue
  }

  components: {
    Child : HelloVue
  }

上記でimportしたChildモジュールをコンポーネントとして登録すると以下のようになります。

<template>
  省略
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<style scoped>
  省略
</style>

templateタグの中で呼び出す

import fromしたモジュールをコンポーネントとして登録するだけではいけません。

この時点ではコンパイル時に「error The “UserDetail” component has been registered but not used」というエラーが発生します。

これを解消するためには、templateタグの中で定義したコンポーネントを使用する必要があります。

呼び出す際は、定義したコンポーネント名をタグとして記述します。

<コンポーネント名 />

上記で子コンポーネントとして登録した「Child」をtemplateタグの中の呼び出したい場所に <Child />を記述します。

<template>
　<div>
    <Child />
  　省略
　<div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<style scoped>
  省略
</style>

外部の.jsファイルの処理を.vueファイルの中に読み込める

ポイント

export defaultとimport fromを使うと外部の.jsファイルの処理を.vueファイルの中に読み込むことができます。

例えば、他の.jsファイルに記述してある変数や関数など、ひとまとまりの機能を.vueの中にモジュールとして読み込むことができます。

使い方

インポート（読み込み）対象の.jsファイルでは、変数、定数、関数など様々な処理を記述して、最終的に渡したい、変数（あるいは定数）や関数をexport defaultの横に記述します。

▼例

const 定数名 = 処理

export default 定数名

let 変数 = 処理

export default 変数

export default 処理

あとは、import fromでモジュール名を指定して読み込めば完了です。

import モジュール名 from 'ファイルパス'

実例

例えば、定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。

const price = 1000
const tax = 1.10

const totalPrice = Math.floor(price * tax) + "円"

export default totalPrice

この、total_price.jsをVueファイル（Product.vue）の中で、「jsTotalPrice」というモジュール名で読み込む場合は以下のようになります。

import jsTotalPrice from './total_price' 

dataに定義したプロパティ「totalPrice」に読み込んだ「jsTotalPrice」を値として渡して、templateタグの中で呼び出す処理は以下のようになります。

<template>
  <div>
    <p>合計金額：{{ totalPrice }}</p>
  </div>
</template>

<script>
import jsTotalPrice from './total_price' 

export default {
  data(){
    return{
      totalPrice: jsTotalPrice
    }
  }
}
</script>

これで、別の.jsファイルの処理を.vueファイルの中で読み込むことができます。

画面の表示は以下のようになり、読み込んだ処理が正しく行われていることがわかります。

.vueファイルの中の処理を、別の.jsファイルに切り出せる

ポイント

export defaultとimport fromを使うと.vueファイルの中の処理を、別の.jsファイルに切り出すことができます。

例えば、.vueファイルの中の処理が多く煩雑になったときに、ある関連した処理を別ファイルに移動してスッキリさせることができます。

使い方

dataのプロパティと値を別の.jsファイルに切り出す場合

.vueファイルでdataで定義しているプロパティを別の.jsに切り出したい場合は、プロパティ名と値のセットを、.jsファイルの中で変数（あるいは定数）として定義して、export defaultにその変数（定数）名を記述します。

  data(){
    return{
      プロパティ名: 値
    }
  },

　↓ .jsファイルへの切り出し

const プロパティ名 = 値

export default プロパティ名

あとは、import fromでモジュール名を指定して読み込めば完了です。

import モジュール名 from 'ファイルパス'

処理を別の.jsファイルに切り出す場合

.vueファイルのmethodsの中で定義している関数や処理を別の.jsに切り出したい場合は、その処理自体を、.jsファイルの中に定義して、export defaultにその変数（定数）名、あるいは処理そのものを記述します。

  computed:{
    プロパティ名(){
      return 処理
    }
  }

　↓ .jsファイルへの切り出し

const 定数名 = 処理

export default 定数名

あるいは、処理をそのものを指定する。

export default 処理

あとは、import fromでモジュール名を指定して読み込めば完了です。

import モジュール名 from 'ファイルパス'

export defaultでの変数や関数処理の渡し方

.jsファイルでのexport defaultで変数や処理を渡す方法は様々で、定数や変数を渡したり、処理自体を渡すこともできます。

const 定数名 = 処理

export default 定数名

let 変数 = 処理

export default 変数

export default 処理

実例

例えば、以下のように現在価格1000円と消費税率1.10を掛け合わせて、販売価格を表示するプログラムがあるとします。

<template>
  <div>
    <p>合計金額：{{totalPrice}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      price: 1000,
      tax: 1.10
    }
  },
  computed:{
    totalPrice(){
      return Math.floor(this.price * this.tax) + "円"
    }
  }
}
</script>

画面の表示は以下のようになります。

このpriceとtaxを掛け合わせてtotalPriceを算出する処理を別のファイルに切り出すと以下のようになります。

.jsファイルへの切り出し（関数と変数の両方を切り出す）

関数のみではなく「price」と「tax」も合わせて.jsファイルに切り出すこともできます。

関数のみを.jsファイル（ここではファイル名をtotal_price.jsとします）に切り出す場合は以下のようになります。

const price = 1000
const tax = 1.10

const totalPrice = Math.floor(price * tax) + "円"

export default totalPrice

total_price.jsが記述できたら、これをVueファイル（Product.vue）の中で、「jsTotalPrice」というモジュール名で読み込みます。

import jsTotalPrice from './total_price' 

dataに定義したプロパティ「totalPrice」に読み込んだ「jsTotalPrice」を値として渡して、templateタグの中で呼び出します。

<template>
  <div>
    <p>合計金額：{{ totalPrice }}</p>
  </div>
</template>

<script>
import jsTotalPrice from './total_price' 

export default {
  data(){
    return{
      totalPrice: jsTotalPrice
    }
  }
}
</script>

.vueファイルの記述がかなりシンプルになりました。

▼画面の表示

.jsファイルに切り出す前と同様の結果が表示されます。

.jsファイルへの切り出し（関数のみ切り出す）

関数のみを.jsファイル（ここではファイル名をtotal_price.jsとします）に切り出す場合は以下のようになります。

const totalPrice = function(price, tax){
  return Math.floor(price * tax) + "円"
}

export default totalPrice

アロー関数を使ってfunctionを省略し以下のようにも記述できます。

　↑↓　同じ

const totalPrice = (price, tax) => {
  return Math.floor(price * tax) + "円"
}

export default totalPrice

total_price.jsが記述できたら、これをVueファイル（Product.vue）の中で、「jsTotalPrice」というモジュール名で読み込みます。

import jsTotalPrice from './total_price' 

メソッドで引数を渡し、その処理結果を画面上に表示します。

<template>
  <div>
    <p>合計金額：{{ calcTotalPrice() }}</p>
  </div>
</template>

<script>
import jsTotalPrice from './total_price' 

export default {
  data(){
    return{
      price: 1000,
      tax: 1.10,
    }
  },
  methods:{
    calcTotalPrice(){
      return jsTotalPrice( this.price, this.tax  )
    }
  }
}
</script>

exportを使う方法

export defaultではなく、exportを使って変数（定数）を一つ一つ指定して受け渡すこともできます。

exportの使い方

exportの場合は{ }の中に、渡せるようにしたい変数や定数を記述します。

export { 変数名１, 変数名2, 変数名3,,, };

受け取るとき（importするとき）に指定するのは欲しい変数や定数です。不要なものは記載しなければimportされません。

import { 変数名1, 変数名3 } from 'ファイルパス' 

実例

定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。

このファイルの中で「price」「tax」「totalPrice」をそれぞれ個別に渡せるようにしたい場合は以下のようにします。

const price = 1000
const tax = 1.10

const totalPrice = Math.floor(price * tax) + "円"

export { price, tax, totalPrice }

total_price.jsの中の「price」と「tax」のみを、Vueファイル（Product.vue）の中で読み込む場合は以下のようになります。

import { price, tax } './total_price' 

受け取った２つの変数を使って、販売金額を算出し、画面に表示する処理は以下のようになります。

<template>
  <div>
    <p>合計金額：{{ calcTotalPrice() }}</p>
  </div>
</template>

<script>
import { price, tax } from './total_price' 

export default {
  methods:{
    calcTotalPrice(){
      return Math.floor( price * tax ) + "円"
    }
  }
}
</script>

exportを使って受け取る変数の名前を変える方法

exportでは渡す変数名と、importで受け取る時の変数名を元の名前から変更することができます。

変数の名前を変える方法

「as」を使って次のように記述します。

元の変数名 as 変更後の名前

exportの場合

export { 変数名１ as 変数名1', 変数名2 as 変数名2', 変数名3,,, };

importの場合

受け取るとき（importするとき）に指定するのは欲しい変数や定数です。不要なものは記載しなければimportされません。

import { 変数名1' as 変数名1'', 変数名3 as 変数名3' } from 'ファイルパス' 

実例

定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。

このファイルの中で「price」「tax」「totalPrice」をそれぞれ個別に渡し、変数名「price」を「cost」に、「tax」を「rate」に変更する場合は以下のようになります。

const price = 1000
const tax = 1.10

const totalPrice = Math.floor(price * tax) + "円"

export { price as cost, tax as rate, totalPrice }

上記の「price」と「tax」を受け取る場合は、変更後の名前で「cost」と「rate」で指定する必要があります。

import { cost, rate } from './total_price' 

更に、importするときに、「rate」という変数名を「tax_rate」に変更する場合は以下のようになります。

import { cost, rate as tax_rate } from './total_price' 

受け取った２つの変数「cost」と「tax_rate」を使って、販売金額を算出し、画面に表示する処理は以下のようになります。

<template>
  <div>
    <p>合計金額：{{ calcTotalPrice() }}</p>
  </div>
</template>

<script>
import { cost, rate as tax_rate } from './total_price' 

export default {
  methods:{
    calcTotalPrice(){
      return Math.floor( cost * tax_rate) + "円"
    }
  }
}
</script>

参考リンク

MDN公式 export