グローバル登録
登録後に作成された、全てのルート 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>
実行結果
