Vue.js の slot が name により表示位置が集約される (Vue.js v2.5 まで)

Vue.js の slot が name により表示位置が集約される

下記のような slot 使用のコンポーネントを用意します。

• default となる slot
• name に named とした名前付き slot

hello-slot.vue

<template>
  <div class="hello-slot">
    <slot /> <br />
    <slot name="named" />
  </div>
</template>

そのコンポーネントを下記のようにしようします。

• タグで囲っていない 1
• named の slot を指定した 2
• タグで囲っていない 3
• named の slot を指定した 4

App.vue

<template>
  <div id="app">
    <HelloSlot>
      1 slot <br />
      <div slot="named">2 named slot</div>
      3 slot <br />
      <div slot="named">4 named slot</div>
    </HelloSlot>
  </div>
</template>

こうなりました

1 slot 
3 slot 

2 named slot
4 named slot