参考にさせて頂いたページ
コンポーネント - vue.js
コンポーネント - vue.js
サンプルコード
<div id="app">
<!--単一スロットの場合の例-->
<my-component>
<p>スロットタグの位置に挿入されるタグ</p>
<p>スロットタグの位置に挿入されるタグ</p>
<p>スロットタグの位置に挿入されるタグ</p>
</my-component>
<!--名前付きスロットの場合の例-->
<my-component-multiple>
<p slot="aaa">slot属性付きだと、components内のslotタグのname属性と対になる aaaのpタグ</p>
<p slot="bbb">slot属性付きだと、components内のslotタグのname属性と対になる bbbのpタグ</p>
</my-component-multiple>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
el : '#app',
components: {
//#appの中で使えるcomponetnsをとりあえず二つ定義
'my-component': {
template: '<div>スロットひとつ<slot></slot></div>'
},
'my-component-multiple': {
template: '<div>スロットふたつ<slot name="aaa"></slot><slot name="bbb"></slot></div>'
}
}
});
</script>
