Vue CLI  slotの使い方

#slotの使い方について

Vue CLIでの使用方法がイメージし辛かったが、分かってきたことのまとめ

#####【使用方法】
子コンポーネントでname属性付きのslotタグを設定。
親コンポーネントで呼び出すコンポーネントを呼び出す。
※この時普段は```</MypageCardForm>```と子コンポーネントを親コンポーネントの記述内に入れるだけだが、
slotを使用する場合は

```
<MypageCardForm>
  <template #指定したname属性名>
    slotで呼び出す記述
  </template>
</MypageCardForm>
```

と記述し、呼び出す。

以下詳細

####MypageCardForm.vue （子コンポーネント）

```javascript
<template>
  <v-card
    max-width="344"
    class="mx-auto"
  >
    <v-list-item>
      <v-list-item-avatar color="grey"></v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title class="headline">Our Changing Planet</v-list-item-title>
        <v-list-item-subtitle>by Kurt Wagner</v-list-item-subtitle>
        <slot name='slotTest'></slot>
      </v-list-item-content>
    </v-list-item>

    <v-img
      src="https://cdn.vuetifyjs.com/images/cards/mountain.jpg"
      height="194"
    ></v-img>

    <v-card-text>
      Visit ten places on our planet that are undergoing the biggest changes today.
    </v-card-text>

    <v-card-actions>
      <v-btn
        text
        color="deep-purple accent-4"
      >
        Read
      </v-btn>
      <v-btn
        text
        color="deep-purple accent-4"
      >
        Bookmark
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-share-variant</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>
```

このファイル内で

```
   <slot name='slotTest'></slot>
```
を設定する。
ポイントは**name='slotTest'**
ここでname指定したものを親コンポーネントで
```
<template #slotTest></template>
```
で呼び出す。


####Login.vue （親コンポーネント）

```javascript

<template>
  <v-container>
    <v-row justify="center" align="center">
      <v-col cols="12">
      <MypageCardForm>
          <template #slotTest>
              <v-btn>ログインページのカード</v-btn>
        </template>
      </MypageCardForm>
      <LoginFormTD/>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import LoginFormTD from '../components/LoginFormTD'
import MypageCardForm from '../components/MypageCardForm'

export default{
    name:'Login',//ここの名前は任意設定
    
    components:{
        LoginFormTD,//ここの記載をtemplateで呼び出す際に使う
        MypageCardForm,
    },
}

</script>
```
呼び出した結果
![スクリーンショット 2020-08-20 6.53.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/7af9e63f-72e8-ae45-a66d-d3435f4bd7e8.png)

```
 <MypageCardForm>
          <template #slotTest>
              <v-btn>ログインページのカード</v-btn>
        </template>
      </MypageCardForm>
```

このファイルでの呼び出しでは「ログインページのカード」というボタン部分で使用。

次に別のファイルでも同じMypageCardForm.vueを呼び出し別記述でslotを呼び出してみる。


####PostList.vue （親コンポーネント）

```javascript
<template>
  <v-container>
    <v-row justify="center" align="center">
      <v-col cols="8">
          <PostCardForm/>
          <PostCardForm/>
          <PostCardForm/>
          <PostCardForm/>
      </v-col>
      <v-col cols='4'>
      <MypageCardForm>
        <template #slotTest>
          <h3>ポストページのカード</h3>
        </template>
      </MypageCardForm>

      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import PostCardForm from '../components/PostCardForm'
import MypageCardForm from '../components/MypageCardForm'

export default{
    name:'Top',//ここの名前は任意設定
    
    components:{
        PostCardForm,//ここの記載をtemplateで呼び出す際に使う
        MypageCardForm,//ここの記載をtemplateで呼び出す際に使う
        
    },
}



</script>
````

呼び出した結果
![スクリーンショット 2020-08-20 6.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/173af1f6-d1f1-802b-9957-7342c52f8617.png)

ここでは

```
  <MypageCardForm>
        <template #slotTest>
          <h3>ポストページのカード</h3>
        </template>
      </MypageCardForm>
```
の部分で使用。
h3タグをslot部分に入れている。
先ほどボタンタグで使用されていた「ログインページのカード」の記述ではなくh3のポストページのカードがしようされている。