Vue のローカルコンポーネントの紹介

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

新しいVue({
  el: '#app',
 
// コンポーネントセンターコンポーネント: {
 // ビュー層でローカルに登録されたコンポーネントをレンダリングする場合 // component-a: ビュー層で呼び出すときに使用する名前 // ComponentA: ローカルに登録されたコンポーネント名 'component-a': ComponentA,
    'コンポーネント-b': コンポーネントB
  }
})

<div id="アプリ">
        <コンポーネント-a></コンポーネント-a>
        <コンポーネント-b></コンポーネント-b>
    </div>

<本文>
    
    <div id="アプリ">
        <コンポーネント-a></コンポーネント-a>
        <コンポーネント-b></コンポーネント-b>
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
        コンポーネントA = {
            テンプレート:`
                <p>私はローカルコンポーネント 1 です</p>
            `
        }
 
        コンポーネントB = {
            テンプレート:`
                <p>私はローカルコンポーネント2です</p>
            `
        }
 
        vm = new Vue({
            el:'#app',
            データ：{
 
            },
            コンポーネント:{
                "コンポーネント-a":コンポーネントA,
                "コンポーネント-b":コンポーネントB
            }
        })
    </スクリプト>