バージョン
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>
要素を入れ子にすることができます。