私はVueコンポーネントを正しく書いていますか？

Question

私は現在、私のVueコンポーネントを書いています。例えば。

<template> 
    <NavBar></NavBar> 
    <div class="Footer"> 
     <div class="left"> 
     <p>I'm a cool footer on the Left!</p> 
     </div> 
     <div class="middle"> 
     </div> 
     <div class="right"> 
     <p>I'm a cool footer on the Right!</p> 
     </div> 
    </div> 
    </template> 

    <script> 
    import NavBar from './NavBar.vue'; 
    export default { 
    name: 'Footer', 
    components: { 
     NavBar 
    } 
    data() { 
     return { 
     } 
    }, 
    methods: { 
    } 
    } 

私の質問は、私の代わりにこのようなコンポーネントを書くべきですか？もしそうなら、違いは何ですか？

Vue.component('my-component', { 
    template: '<div>A custom component!</div>' 
    }) 

    new Vue({ 
    el: '#example' 
    }) 

Answer 1

公式ガイドは、ここでの違いを説明：https://vuejs.org/v2/guide/single-file-components.html

短い説明がvue.component...構文がnew Vue({...宣言と一緒に使用されるのに対し、<template>...構文（例えばmy-component.vue）単一ファイルのコンポーネントのために使用されることです。ガイドから

全引用：多くのVueのプロジェクトで

、グローバルなコンポーネントがすべてのページの体内のコンテナ要素をターゲットにするnew Vue({ el: '#container' })続く、Vue.componentを使用して定義されます。 これは、JavaScriptが特定のビューを向上させるためにのみ使用される中小規模のプロジェクトではうまく機能します。あなたのフロントエンドは完全にはJavaScriptによって駆動されたときしかし、より複雑なプロジェクトでは、または、これらの欠点が明らかになる：

• グローバル定義は、すべてのコンポーネントに対して一意の名前を強制

• 文字列テンプレートは、構文の強調表示が欠けています醜いスラッシュが必要 複数行HTMLの場合

• いいえCSSサポートは、 HTMLとJavaScriptをコンポーネントに モジュール化されている一方で、CSSが著しく

• を残しているのNOビルドステップは、HTMLとES5 JavaScriptのではなく、 プリプロセッサパグ（旧ジェイド）とバベルよう

ために私たちを制限するものではありません

これらはすべて、ファイルパック.vueの単一ファイルコンポーネントで解決されており、WebpackやBrowserifyなどのビルドツールを使用して作成できます。