Vue.componentとcomponentオプションの違い

Vue.js

【前提条件】

[環境]
  • Vue.js 0.12.15
[参考サイト]

http://jp.vuejs.org/api/

【概要】

前回はコンポーネントの登録について書いたのですが、
根本的な勘違いをしていたので改めて調べてみました。

ということで今回はVue.componentで登録する方法と
インスタンスプロパティのcomponentsの動きについてです。

現在、1.0.0alphaが公開されているので今後は変わる可能性があります。

【サンプルソース】

ということでまずは動作するソースです。

[HTML]
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>Vue.js-component</title>
  </head>
  <body>
    <style>
      div#parent1,div#parent2 {
        padding: 10px;
        margin: 10px;
        border: solid 1px black;
      }
    </style>
    <div id="parent1">
      <global message="ここはグローバルです"></global>
      <private1 message="ここはプライベート1の領域です"></private1>
      <private2 message="ここはプライベート2の領域です"></private2>
    </div>
    <div id="parent2">
      <global message="ここはグローバルです"></global>
      <private1 message="ここはプライベート1の領域ではありません"></private1>
      <private2 message="ここはプライベート2の領域ではありません"></private2>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.15/vue.js"></script>
    <script src="sample.js"></script>
  </body>
</html>

div#parent1とdiv#parent2というのが親コンポーネントとなるDOMです。
それぞれglobal、private1、private2という子コンポーネントを使用しています。

[JavaScript]
    var SampleComponent = Vue.extend({
        template: "<p v-text='message'><p>",
        props: ["message"]
    });
    Vue.component("global", SampleComponent);

    var parent1 = new Vue({
        el: "#parent1",
        components: {
            private1: SampleComponent,
            private2: SampleComponent
        }
    });
    var parent2 = new Vue({ el: "#parent2" });

SampleComponentというコンポーネントをひとつ作成します。

そして、Vue.componentでglobalという名前で登録します。
こうするとグローバルな領域（？）にコンポーネントが登録されます。
サンプルではdiv#parent1とdiv#parent2ともに参照することができます。

続いてコンポーネントのオプションであるcomponentsを使用して、parent1に登録しています。
componentsに設定することによりparent1からはprivate1/private2という名前で
SampleComponentを使用することができます。

parent2に関してはelの指定のみなので、parent2からprivate1/private2というのは使用することができません。

【動きの確認】

ほぼ同じコードがこちらにあります。

画面を見てみるとdiv#parent1とdiv#parent2ともにglobalは動作していることがわかります。
private1/private2に関してはdiv#parent1では動作していますが、div#parent2では動作しません。
componentsで定義した子コンポーネントは登録した親コンポーネントからしか参照できません。

【まとめ】

Vue.componentの場合はグローバル、componentsオプションの場合はプライベートと動きだったっぽいです。

コンポーネントとして登録するのであれば、基本的にグローバルで使うのがデフォルトになるのかなと。
プライベートの方はどういったときに使うのか思い浮かばないですね。
名前が衝突したときの別名として扱うとかでしょうか？

基本的にはグローバルしかつかわない気がします。