第20回 Vue.js入門　グローバルコンポーネントとローカルコンポーネント

今回は、コンポーネントに関する内容に戻って、グローバルコンポーネントとローカルコンポーネントについての説明をします。

ローカルコンポネントとは

これまでの回で作ってきたような、どのインスタンスでも使うことができるコンポーネントのことを「グローバルコンポーネント」と呼びます。

それに対して、「ローカルコンポーネント」とは、特定のVueインスタンス内でしか使えないようなコンポーネントのことです。

どんなときにこのローカルコンポーネントが使われるのかを説明します。

ここまでの回では、１つのプログラムで作成したVueインスタンスの個数はいつも１つでした。

しかし、１つのプログラムで２つ以上のVueインスタンスを作って、それぞれのインスタンスでデータを管理することがあります。

すると、とあるインスタンスでは使えるけど、違うインスタンスでは使えないような、使えるインスタンスが限定されたコンポーネントを作りたいことがあります。

そのような場合、使えるインスタンスを指定することができる、ローカルコンポーネントを作るひつようがあります。

ローカルコンポーネントの作り方は、グローバルコンポーネントの作り方とは異なります。

「複数のVueインスタンスを作成する」とは

まず、２つ以上インスタンスを作成することがどんなことを意味しているのか説明します。

次のようなコードを書くことで、２つのVueインスタンスを作成することができます。

HTML側↓

<div id="app"><p>これは{{ message }}</p></div>
<div id="app2"><p>これは{{ message }}</p></div>

JavaScript側↓

var vm = new Vue({
  el: "#app",

  data: {
    message: "Vueインスタンス１"
  }
})
var vm2 = new Vue({
  el: "#app2",
  data: {
    message: "Vueインスタンス２"
  }
})

２つのインスタンスは、dataプロパティに同じmessageというプロパティを持っていますが、ブラウザに上のコードを表示すると次のように表示されることから、それぞれが別のmessageというプロパティを持っている事がわかります。

グローバルコンポーネントの使い方

これまでの回で使ってきたコンポーネントは、ほぼ全てがグローバルコンポーネントでした。

そのため、グローバコンポーネントの作り方と使い方は、見覚えのあるものだと思います。

作り方

Vue.component("コンポーネントの名前", {
  template: "コンポーネントの内容をHTMLタグを使って書きます"
})

他にも、x-templateを使った作り方やVue.extend APIを使った作り方など、複数の作り方があります。

使い方

<div id="app">
  <コンポーネントの名前></コンポーネントの名前>
</div>

ローカルコンポーネントの使い方

作り方

var コンポーネント名 = {
  template: "ここにコンポーネントの内容をHTMLタグを使って書きます"
}
var Vueインスタンス名 = new Vue({
  el: "#Vueを適用する要素のid",
  components: {
    "使うときのコンポーネント名": コンポーネント名    //使うときのコンポーネント名はケバブケースで書きます
  }                                             
})

上のように使える範囲を限定したいインスタンスを生成するときのオブジェクトに、componentsプロパティを設定します。

使うときのコンポーネント名とは、実際にHTMLタグとして書くときに使うコンポーネントの名前のことです。

使い方

<div id="どのVueインスタンスが適用されているのかを区別するためのid">
  <コンポーネントの名前></コンポーネントの名前>
</div>

ローカルコンポーネントとグローバルコンポーネントの違い

ローカルコンポーネントとグローバルコンポーネントの違いは、コンポーネントをVueインスタンスごとに設定できるのか、設定できないのかという部分にあります。

具体的な違いを見てみましょう。

ローカルコンポーネント

次の1~8行目で、ローカルコンポーネントを作っています。

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"
})

そして、12行目ではvmというVueインスタンスにだけコンポーネントを設定しています。vm2というVueインスタンスも作っていますが、そちらにはあえてコンポーネントを設定していません。

作ったコンポーネントをvmというVueインスタンスだけに設定しているため、次のようにvm2で管理している部分に<my-component></my-component>のように書いても、

<div id="app">
  <p>インスタンス１：</p>
  <my-component></my-component>
</div>
<div id="app2">
  <p>インスタンス２：</p>
  <my-component></my-component>
</div>

そちらの方ではコンポーネントが使えません。つまり、ブラウザには下のようにフォームが１つだけ表示されます。

これは「作ったコンポーネントをvmというVueインスタンスで管理している部分でしかを使わない！」と設定したためです。

グローバルコンポーネント

今度はグローバルコンポーネントを作ります。次のコードの1~8行目が、グローバルコンポーネントを作っている部分です。

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'
})

グローバルコンポーネントの場合、ローカルコンポーネントのようにVueインスタンスごとにコンポーネントを使うかどうか設定できません。

逆に言えば、作ってしまえばどのVueインスタンスが管理している場所であろうがコンポーネントが使えます。

次のように、ローカルコンポーネントのときと全く同じHTMLであったとしても、

<div id="app">
  <p>インスタンス１：</p>
  <my-component></my-component>
</div>
<div id="app2">
  <p>インスタンス２：</p>
  <my-component></my-component>
</div>

フォームが２つ表示されます。

まとめ

今回わかったこと

• Vueインスタンスは同じプログラム内に複数個作ることができる
• どのVueインスタンスが適用されている要素の中でも使えるコンポーネントのことを「グローバルコンポーネント」という
• 特定のVueインスタンスが適用されている要素の中だけでしか使えないように設定できるコンポーネントを「ローカルコンポーネント」という