Vue コンポーネントを分割してpropsで値を渡す方法

#はじめに
[Vue 映画情報をTMDb APIを使って取得](https://qiita.com/kokogento/items/569d85c760c4d0316fbd)
:point_up:この記事のコードは全て上記リンクが元になってます。詳しく気になる人は、覗いてみてね〜

Vueの基礎を教えてくれた@popo62520908 さん、ありがとう:relieved:

#このファイルを分割したい
「コンポーネントを分割」と言うと、どうも難しそうだが言い換えるならば「ファイルを分割」と言った感じ。

以下のようなファイルがあった場合、`<v-card>`の部分だけを別のコンポーネント（別ファイル）にしたいとする。

```vue:Home.vue
<template>
    <v-container>
        <v-row>
            <v-col v-for="movie in movies" :key="movie.id">
                <v-card>
                    <v-img v-bind:src="'http://image.tmdb.org/t/p/w300/' + movie.poster_path"></v-img>
                    <v-card-title>{{ movie.title }}</v-card-title>
                    <v-card-subtitle>{{ movie.release_date }}</v-card-subtitle>
                    <v-card-text>{{ movie.overview }}</v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import axios from 'axios'

export default {
    name: 'Home',
    data() {
        return {
            movies: [],
         // 自分のkeyに置き換える
            apiKey: '***',
        }
    },
    methods: {
        getMovies() {
            // &language=jaで日本語に（日本語版がないものは空欄になるけど、、）
            axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=${this.apiKey}`)
            .then(response => {
                this.movies = response.data.results
                console.log(this.movies);
            })
            console.log(this.movies);

        },
    },
    created() {
        this.getMovies();
    }
}
</script>
```

`<v-card>`の部分とは、**下記動画で見てわかる通り「映画１つ分のcard」の事である。**



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">はじめてVueを触ってみた。。。Angular以外jsフレームワーク知らんから、これからはVueを本格的に学んでいく！<br>ってことで、映画情報をVue（v2系）で取得してみた。<a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://twitter.com/hashtag/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E8%BB%A2%E8%81%B7?src=hash&amp;ref_src=twsrc%5Etfw">#エンジニア転職</a> <a href="https://t.co/UvEHYFiirR">pic.twitter.com/UvEHYFiirR</a></p>&mdash; 高卒プログラマーげんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1310902062100566024?ref_src=twsrc%5Etfw">September 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#子コンポーネントを作る
親コンポーネントが上記の`Home.vue`

**そして`<v-card>`の部分になる子コンポーネント、`CardTemplate.vue`を作成しよう。**

`CardTemplate.vue`は`Home.vue`と同じ階層に設置する。

##Home.vue

```vue:Home.vue
<!-- 省略 -->
 <v-col v-for="movie in movies" :key="movie.id">
   <!-- scriptタグ内のcomponentsで定義したcard-template -->
   <card-template
    class="d-flex"
    :oneMovie="movie"
     >
    </card-template>
 </v-col>
<!-- 省略 -->

<script>
import axios from 'axios'

// v-cardの部分になる子コンポーネント
import CardTemplate from './CardTemplate.vue'
export default {
    name: 'Home',
    components: {
        // 
        'card-template': CardTemplate,
    },
// 省略
</script>
```

`<card-template>`タグの中の**`:oneMovie="movie"`が、子コンポーネントに渡される値。**


##CardTemplate.vue

```vue:CardTemplate.vue
<template>
    <v-card>
         <div>
        <v-img v-bind:src="posterImg" ></v-img>
    </div>
    <div>
        <v-card-title>{{ oneMovie.title }}</v-card-title>
        <v-card-subtitle>{{ oneMovie.release_date }}</v-card-subtitle>
        <v-card-text>{{ oneMovie.overview }}</v-card-text>
    </div>
    </v-card>
</template>

<script>
export default {
    props: [
        'oneMovie',
        ],
     data() {
        return {
            posterImg: `http://image.tmdb.org/t/p/w154/${this.oneMovie.poster_path}`,
        }
    },
}
</script>
```

`props`で親コンポーネントから渡された`oneMovie`を受け取っている。

受け取った`oneMovie`をconsoleで確認してみるとこんな感じで、映画１つ分のオブジェクト？（こう言うのなんて言うの？w）が取得できている。

```vue:CardTemplate.vue
created() {
   console.log(oneMovie);
    }
```

![スクリーンショット 2020-10-15 21.37.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/76e3f49b-de5b-d8b8-ecab-d083d99ba88f.jpeg)


これでコンポーネント分割ができました！