https://px-wing.hatenablog.com/entry/2020/09/29/082700

グローバル登録

登録後に作成された、全てのルート Vue インスタンス(new Vue)のテンプレート内で使用できることを意味します

ローカル登録

グローバル登録は理想的ではありません。例えば Webpack のようなビルドシステムを利用しているときに、グローバルに登録した全てのコンポーネントは、たとえ使用しなくなっても、依然として最終ビルドに含まれてしまうことでしょう。これは、ユーザがダウンロードしなくてはならない JavaScript のファイルサイズを不要に増加させてしまいます。
他のサブコンポーネント内では使用できないことに注意して下さい

サンプルコード

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <global-hello your-name="山田太郎"></global-hello>
    <local-hello your-name="山田太郎"></local-hello>
    <counter></counter>
</div>
<script>
Vue.component('global-hello',{
    props: ['yourName'],
    template: '<div>こんにちは、{{yourName}}！</div>'
})
new Vue({
  el: '#app',
    components: {
        'local-hello': {
            props: ['yourName'],
            template: '<div>{{yourName}}ローカル</div>'
        },
        'counter': {
            props:['init'],
            template: '<div>{{ current }}<input type="button" v-on:click="countup" value="＋"><input type="button" v-on:click="countdown" value="ー"></div>',
            data: function () {
                return {
                    current: this.init ? this.init : 0
                }
            },
            methods:{
                countup: function(){
                    this.current++;
                },
                countdown: function(){
                    this.current--;
                }            
            }
        }
    }
})
</script>
</body>
</html>

実行結果

f:id:PX-WING:20200928234553p:plain