Vueコンポーネント登録方法の解釈

Vue.component('コンポーネント名', { 
    オプション 
})

//メイン.js
//この例は、vue-cli で作成されたプロジェクトです。デフォルトでは vue の不完全なバージョンであり、テンプレート オプションは使用できないため、render 関数を使用してコンポーネント コンテンツを書き込みます。
Vue.component('all-test',{
  データ（）{
    戻る {
      x: 「私はグローバルコンポーネントです」
    }
  },
  レンダリング(h){
    h('div',this.x) を返します
  }
})

//グローバルに登録されたコンポーネントは直接使用できます //App.vue
<テンプレート>
  <div id="アプリ">
    <全テスト />
  </div>
</テンプレート>

コンポーネント = { オプション }

//new Vue はルート要素 Vue インスタンスを作成します new Vue({
    el: '#app'
    コンポーネント:
        'my-component-name': コンポーネント
    }
})

//または、Vueコンポーネントによって作成されたVueインスタンスを登録します export default {
    コンポーネント:
        'my-component-name': コンポーネント
    }
}

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <全テスト />
    <コンポーネント-a />
    <コンポーネント-b />
  </div>
</テンプレート>

<スクリプト>
ComponentA = {
  データ（）{
    戻る {
      x: 「私はローカルコンポーネントAです」
    }
  },
  レンダリング(h){
    h('div',this.x) を返します
  }
}

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    'コンポーネント-a': コンポーネントA、
    'コンポーネント-b': {
        データ（）{
          戻る {
            x: 「私はローカルコンポーネントBです」
          }
        },
        レンダリング(h){
          h('div',this.x) を返します
        }
    } 
  }
}
</スクリプト>

//c.js
エクスポートデフォルト{
    データ（）{
        戻る {
          x: '私はc.jsファイルによって個別にエクスポートされたコンポーネント構築オプションオブジェクトです'
        }
      },
      レンダリング(h){
        h('div',this.x) を返します
      }
}

//D.vue
<テンプレート>
    <div>
        {{x}}
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            x: '私はD.vueファイルによってエクスポートされたコンポーネントです'
        }
    }
}
</スクリプト>

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <C />
    <D />
  </div>
</テンプレート>

'./c.js' から C をインポートします
'./components/D.vue' から D をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    C、
    だ 
  }
}
</スクリプト>