【vue.js】 componentの中身(html)を親から子に送る【slotの使い方】

#１部分の転送
まずは親コンポーネントの外観から

app.vue

<template>
  <div class="row">
    <div class="col-12 text-center">
      <app-component>
        <p>this is blue</p>
      </app-component>
    </div>
  </div>
</template>
<script>
import Comp from "./components/child.vue";
export default {
  components: {
    appComponent: Comp
  }
};
</script>

ここでタブの中子コンポーネントに贈りたいhtmlを書く。

(※ちなみにappComponentがapp-component担っているが、
htmlは大小文字を識別できないので大文字を-として互換性があるらしい)

<app-component>
   <p>this is blue</p>
</app-component>

child.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>

以下のslotの部分で上のｐ要素を受け取っている。

<slot></slot>

#複数転送したいとき

app.vue

<template>
  <div class="row">
    <div class="col-12 text-center">
      <app-component>
        <p slot="slotfirst">this is blue</p>

        <div slot="slotsecond">
           <button class="hogehoge"></button>
        </div>
      </app-component>
    </div>
  </div>
</template>
<script>
import Comp from "./components/child.vue";
export default {
  components: {
    appComponent: Comp
  }
};
</script>

ポイントはここslot=""でslotの名前を決めている事がわかる

<p slot="slotfirst">this is blue</p>

<div slot="slotsecond">
     <button class="hogehoge"></button>
</div>

指定したslotはnameで呼び出せる

child.vue

<template>
    <div>
        <slot name="slotfirst"></slot>
        <slot name="slotsecond"></slot>
    </div>
</template>