コンポーネントをローカルに登録するには？

Question

私はvue-cli 2.8.1.を使用しており、プロジェクトはvue init webpack projectで開始しています。

私は（docsのように）ローカルAppButtonを登録するが、エラーを取得しようとしている：

Unknown custom element: app-button - did you register the component correctly?

---

main.js

import Vue   from 'vue' 
import AppComponent from '@/components/app/app.component.vue' 
import AppButton  from '@/components/button/button.component.vue' 

new Vue({ 
    el: '#app', 
    template: '<AppComponent/>', 
    components: {AppComponent, AppButton} 
}) 

app.component .vue

私はグローバル AppButtonコンポーネントを登録した場合

<template src="./app.component.html"></template> 
<script src="./app.component.js"></script> 
<style src="./app.component.css"></style> 

button.component.vue

<template src="./button.component.html"></template> 
<script src="./button.component.js"></script> 
<style src="./button.component.css"></style> 

---

すべてが期待通りに動作しますが、私はすべてのコンポーネントのVue.component('app-button', AppButton)を繰り返したくはありません。この場合、あなたは何をお勧めしますか？

import Vue   from 'vue' 
import AppComponent from '@/components/app/app.component.vue' 
import AppButton  from '@/components/button/button.component.vue' 

Vue.component('app-button', AppButton) 

new Vue({ 
    el: '#app', 
    template: '<AppComponent/>', 
    components: {AppComponent} 
}) 

Answer 1

あなたはmain.jsでグローバルに登録すると、あなたはあなたの各コンポーネントに登録する必要はありません。それは単に世界的に利用可能になるでしょう。

最初の例では、AppButtonをルートスコープでのみ使用できます。子孫のスコープでは使用できません。だからこそあなたはエラーに遭遇します。