定義
ローカルコンポーネントとは
特定のVueインスタンス内でしか使えないようなコンポーネント
グローバルコンポーネントとは
どのインスタンスでも使うことができるコンポーネント
コンポーネントの使い方
ローカルコンポーネント、グローバルコンポーネント共にhtmlは共通で以下のように設定する。
html
<div id="app">
<p>インスタンス１：</p>
<my-component></my-component>
</div>
ローカルコンポーネント
javascript
var MyComponent = {
template: `
<form>
<input type="text">
<button type="submit">送信</button>
</form>
`
}
var vm = new Vue({
el: "#app",
components: {
'my-component': MyComponent
}
})
「var vm」でインスタンスを生成し、それに対して「My Component」のローカルコンポーネントを割り当てている。
グローバルコンポーネント
javascript
Vue.component("my-component", {
template: `
<form>
<input type="text">
<button type="submit">送信</button>
</form>
`
})
const mv = new Vue({
el: '#app'
})
「Vue.component」でコンポーネントを生成しており、「const mv」とは直接関連していない。
ローカルとグローバルの違い例
ローカルとグローバルで具体的な使い方を参考にどのような部分に違いが出てくるのかを検証してみる。
ローカルコンポーネント
html
<div id="app">
<p>インスタンス１：</p>
<my-component></my-component>
</div>
<div id="app2">
<p>インスタンス２：</p>
<my-component></my-component>
</div>
javascript
var MyComponent = {
template: `
<form>
<input type="text">
<button type="submit">送信</button>
</form>
`
}
var vm = new Vue({
el: "#app",
components: {
'my-component': MyComponent
}
})
var vm2 = new Vue({
el: "#app2"
})
「app」の方ではコンポーネントを設定しているが、「app2」の方ではコンポーネントを設定していないため、インスタンス1のみに送信フォームが表示されている。
グローバルコンポーネント
html
<div id="app">
<p>インスタンス１：</p>
<my-component></my-component>
</div>
<div id="app2">
<p>インスタンス２：</p>
<my-component></my-component>
</div>
javascript
Vue.component("my-component", {
template: `
<form>
<input type="text">
<button type="submit">送信</button>
</form>
`
})
const mv = new Vue({
el: '#app'
})
const mv2 = new Vue({
el: '#app2'
})
この場合はどちらのインスタンスでも生成することができる。