• ..

YAML

    グローバルなコンポーネント

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

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

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

    1. テンプレート上のコンポーネントの名前string
    2. datamountedなどを含む、いわゆる Vue コンポーネントのオブジェクト

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

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

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

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

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

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