関連

グローバルなコンポーネントとは、各ファイルで読み込んでcomponentsセクションに渡さなくとも使えるコンポーネントのことです。

グローバルコンポーネントの登録

Vue.componentという静的メソッドを使います。これは引数を２つ取り、それぞれ

  1. テンプレート上のコンポーネントの名前string

  2. dataやmountedなどを含む、いわゆる Vue コンポーネントのオブジェクト

を受け取ります。
ちなみに、コンポーネントの名前は-で繋いだ名前にすると良いです。

以下はmy-componentというコンポーネントの登録例です。

Vue.component('my-component', {
  data() {
    return {
      message: 'hello'
    }
  },
  mounted() {
    console.log(this.message);
  }
});

アプリをマウントする前に

new Vueでアプリをマウントする前に上記のコードで登録しておく必要があります。

Vue.component('...', {/* ... */});

new Vue({/* ... */});

純

JavaScript で飯食べたい歴約 5 年、 純（ nju33 ） によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log

nju33