#参考
Udemy参考動画：https://www.udemy.com/course/vue-js-complete-guide/
講師 : よしぴー(Yoshipi)さん

__Vue.js__で__slot__タグを使って__htmlタグを親コンポーネントで定義__する方法をご紹介します。

#通常
子コンポーネント : ChildComponent

//ChildComponent

<template>
  <div>
    <p>{{ title }}</p>
  </div>
</template>


<script>
export default {
  data() {
    return {
      title,
    };
  }
};
</script>

親コンポーネント App.Vue

//App.Vue

<template>
  <div>
    <ChildComponent :title="タイトル"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },  
};
</script>

##結果

タイトル

__値__や__プロパティ__を渡し、__タグ__は__子コンポーネント__で定義する。

#スロット

タグを__親コンポーネント__で__定義__できる
対応 : ver2.6.0~

子コンポーネント : ChildComponent

//ChildComponent

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

親コンポーネント : App.Vue

//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template>
          <p>タイトル</p>
      <template>
    </ChildComponent>
  </div>
</template>

##結果

タイトル

コンポーネント内の__templateタグ__と子コンポーネントの__slotタグが対応__

#デフォルト
__slotの数__だけ__templateが生成__されるため、__slotタグを複数置く__と同じ__内容が連続__して表示される

デフォルトの仕様ということで__フォールバックコンテンツ__と呼ばれる。

例えば、
子コンポーネント : ChildComponent

//ChildComponent

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

##結果

タイトル
タイトル
タイトル
タイトル

#スコープ

インスタンス内（親コンポーネント内）
CSSは例外 : 親コンポーネントのスタイルが優先的に働く

#名前付きslot

slot : name属性（子コンポーネント）
template : v-slot（親コンポーネント）

name__の値と__v-slot__の引数が__対応
注意：nameは__値__、v-slotは__引数__

子コンポーネント : ChildComponent

//ChildComponent

<template>
  <div>
    <slot name="title"></slot>
    <slot name="name"></slot>
  </div>
</template>

親コンポーネント : App.Vue

//App.Vue

<template>
 <div>
   <ChildComponent>
　　　 <template v-slot:title>
         <p>タイトル</p>
     <template>
     <template v-slot:name>
         <p>太郎</p>
     <template>
   </ChildComponent>
 </div>
</template>

##結果

タイトル
太郎