Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.js 0.11.x その0011 Vue.component()で登録したcomponentを入れ子にする

バージョン

Vue.js v0.11.5

今回やってみたこと

vue.jsその0008 Component Systemを使用して、html要素のコンポーネントを作る - Motomichi Works Blog

vue.jsその0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する - Motomichi Works Blog

コンポーネントを作ったりしてみたわけですが、

<div id="sample">
  <hoge-hoge class="hoge">
    <foo-foo class="foo">
    </foo-foo>
  </hoge-hoge>
</div>

のようにhoge-hogeにfoo-fooを入れるのをやってみました。

サンプルソース

<div id="sample">
  <hoge-hoge class="hoge">
    <foo-foo class="foo">
    </foo-foo>
  </hoge-hoge>
</div>

<script type="text/x-template" id="hogeTemplate">
  <div>
    <content>
    </content>
  </div>
</script>

<script src="../js/vue.min.js"></script>
<script>
  Vue.component('hoge-hoge', {
    template: '#hogeTemplate',
    replace: true
  });
  Vue.component('foo-foo', {
    template: '<span>Element</span>',
    replace: true
  });
  var vm = new Vue({
    el: '#sample',
  });
</script>

上記のサンプルソースのように、x-templateの中に<content></content>を含めることで、自作の<hoge-hoge></hoge-hoge>要素の中に、自作の<foo-foo></foo-foo>要素を入れ子にすることができます。