Vueで動的にコンポーネントを追加する方法

今回、webアプリを作成しているのですが、その時に`クリックされたらコンポーネントを追加する`方法がわからなかったので、備忘録として残しておきたいと思います。

作成したコードの方では、バリデーションもできるように記述してあるのですが、わからない方にとってはバリデーションの部分が邪魔になるかと思いますので、今回はバリデーション部分は無い状態にしようと思います。

# 開発環境
* MaOS
* VSCode 
* vue.js 2.x
* vue/cli 4.5.13
* Bootstrap-vue

# 参考記事
[Dynamically adding different components in Vue](https://stackoverflow.com/questions/50418651/dynamically-adding-different-components-in-vue)
今回はこちらの記事を参考にさせていただきました。


#方法

まずは親のコンポーネントからですね。

```Vue:Parent.vue
<template>
    <div>
        <Children></Children>
        <component v-for="field in fields" v-bind:is="field.type" v-bind:key="field.id"></component>
        <b-button block type="button" v-on:click="addForm('Children')" class="border-0" style="background-color: rgba(191, 202, 63, 0.99);">観光地を追加</b-button>
    </div>
</template>

<script>
import Children from '../components/Children.vue'

export default {
    data: () => ({
        fields: [],
        count: 0
    }),
    components: {
        Children,
    },
    methods: {
        addForm: function(type) {
        this.fields.push({
            type: type,
            id: this.count++
        });
        }
    }
}
</script>
```

続いて子のコンポーネントになります。

```Vue:Children.vue
<template>
    <div>
        <b-row class="justify-content-end d-flex mt-3 mb-3">
            <b-col cols="3">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="移動手段">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="3">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="所要時間">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="3">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="料金">
                    </b-form-input>
                </b-form-group>
            </b-col>
        </b-row>
        <b-row>
            <b-col cols="4">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="観光地">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="4">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="滞在時間">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="4">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="料金">
                    </b-form-input>
                </b-form-group>
            </b-col>
        </b-row>
    </div>
</template>
```

# 解説
解説をしていきたいと思います。

## 子のコンポーネント
子のコンポーネントでは、いつも通りコンポーネントを作成するだけですね。

## 親のコンポーネント
次に`親のコンポーネント`の説明です。
>①まず、`data`に空のリスト`fileds`を作成します。
>②次に`観光地を追加`ボタンがクリックされたら、`fields`の中に、`子のコンポーネントとID`を追加するようにします。
>③`<component>`タグを用意して、その中で`v-for`を回して、クリックされた分だけ子のコンポーネントを表示するようにします。

##is属性
`is属性`は`コンポーネント`を動的に切り替える時に使用されるみたいです。

僕の勝手な理解では、`<component>`タグの<>内に入ってくるコンポーネント名を`is`に入れていくのかなと思っております。

# まとめ
日本語で記事が出てこない場合は、英語で調べるのも一つの手だなと思いました。
同じような部分でつまづいている方の助けになれば幸いです。

また、今度バリデーションありの投稿もしたいと思います。