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

グローバル登録の場合いずれのvueのidにも適用されている。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

<div id="app2">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

var data = {
  number: 12
}

Vue.component('my-component', {
  data: function() {
    return data
  },
  template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function() {
      this.number += 1;
    }
  }
})

new Vue({
  el: '#app',
})

new Vue({
  el: '#app2',
})

ローカル登録

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

<div id="app2">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

var component = {
  data: function() {
    return {
      number: 12
    }
  },
  template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function() {
      this.number += 1;
    }
  }
}

new Vue({
  el: '#app',
  components:{
  'my-component':component
  }
})

new Vue({
  el: '#app2',
})

＊appにだけコンポーネントが適用されています。

コンポーネント「ローカル」登録：コンポーネント名

Vue.component('my-component-name', 変数名)

＊コンポーネント名は Vue.component の第一引数です。' 'の部分です。
＊適用するVueインスタンスにだけコードを書きます。

コンポーネント登録(共通)：命名のケース (Name Casing)

ケバブケース (kebab-case)	my-component-name
パスカルケース (PascalCase)	MyComponentName

*グローバル登録では全てのnew Vueに適用されます。