不明な点が、Javascriptのモジュールの仕様 (import,export)のことなのか Vueのコンポーネントのことなのかはっきりしないのでモジュールについて既にご存知であれば、読み飛ばしてください。
Javascriptのモジュール(import/export)
従来のJavascriptには他の言語(C++,C#,java,phpなど)のようなモジュールという概念がありません。
export/importという構文はES2015という仕様からこれをjavascriptでも可能にして、機能の単位ごとに分割した.jsファイルを他のモジュールから呼び出すことができるようにしたものです。
他のモジュールに機能を公開するための構文が export
です。ひとつのjsファイルに複数の変数や関数がある場合は、公開するものを選んでそれぞれに export
を付けます。またexportするものには名前がついている必要があります。
したがって関数をexportする場合も、以下のようにhello
という変数に入れる必要があります。
js
1export var hello = function () {
2 alert('hello');
3};
このやり方を 名前付きエクスポート といいます。
これに対して、モジュールに対して一つだけデフォルトとしてエクスポートするものを定義できます。
これを デフォルトエクスポート と言って、この時は変数名を必要としません。
上記のコードをデフォルトエクスポートにすると以下のようになります。
js
1export default function () {
2 alert('hello');
3};
【参考】
JavaScriptにおけるモジュールとimport/exportの使い方
Vue.jsのコンポーネント
Vue.jsで再利用可能な部品をコンポーネントとして用意しておくことで、複数の箇所で使用可能なVueのソースを一箇所で管理できて便利です。
この時に上記のモジュールの仕組みを利用しています。
vueの場合、コンポーネントはvueのインスタンスをオブジェクトとして定義されるので
以下のように {} で囲まれているものをデフォルトエクスポートすることができます。
js
1export default {
2 template: '<div>こんにちは{{name}}さん</div>',
3 data: ()=> {
4 return {
5 name: "太郎"
6 }
7 },
8}
このようにすることでメインのvueインスタンス作成時にその中で定義されたかのように使用することができます。(厳密にはは親子の関係があるのでデータの受け渡しなど考慮が必要ですが)
js
1import HelloComp from 'helloComp.vue'
2new Vue({
3 el: '#app',
4 components: {
5 'hello-component': HelloComp,
6 }
7})
【参考】
Vuejsガイド-コンポーネントの基本
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/22 09:11