#前提
コンポーネントを複数用意した際の切り替え方。
その際注意すること。

__House__コンポーネント
__Content__コンポーネント
親コンポーネント : App.vue

今回は__二つ__子コンポーネントを用意。
ボタンを押すことで二つの__コンポーネントを切り替える__ことができる。

__House__コンポーネント

House.vue

<template>
  <div>
    <p>House</p>
  </div>
</template>

__Content__コンポーネント

Content.vue

<template>
  <div>
    <p>Content</p>
    <input type="text">
  </div>
</template>

<script>
export default {
  destroyed() {
    console.log('destoryed');
  }
}
</script>

__親__コンポーネント

App.vue

<template>
  <div>
    <button @click="currentComponent = 'Content'">Content</button>
    <button @click="currentComponent = 'House'">House</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'House',
    };
  },
}
<script>

##コンポーネントの切り替え
###keep-alive

__keep-alive__タグ
__component__タグ
v-bind:is(:is)

keep-alive__のなかに__component__を__ネスト。
componentの中で__v-bind:is__を使って__プロパティを指定__すると完成。

App.vueではcurrentComponentプロパティにコンポーネントを値として挿入しているが、
__直接指定__も可能。

App.vue

//直接指定

<component :is="House"></component>
<component :is="Content"></component>

##ライフサイクルフック
###ライフサイクル

activated
deactivated

__keep-alive__を使用することによって__新たなライフサイクル__が二つ追加される。

created
destroyed

この二つをイメージするとわかりやすい。

###注意点

__異なる点__として、__毎回インスタンス化されない__ため、実際にcreatedやdestroyedされているわけではない。

そのため、inputなどに入力したデータは切り替え後も消えずに残る。

##参照
udemy講座 : https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15371400#content
講師 : よしぴー(Yoshipi)さん