Motomichi Works Blog

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

vue.js 1.0 その0001-002 コンポーネント 単一スロット、名前付きスロット

参考にさせて頂いたページ

コンポーネント - 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>