【Vue.js】動的に複数のコンポーネントを切り替える

下記のように、ボタンクリックによりコンポーネントを切り替える。

v-ifディレクティブを用いた場合。

App.vue

<template>
  <div>
    <button @click="currentComponent = 'home'">home</button>
    <button @click="currentComponent = 'about'">about</button>
    <home v-if="currentComponent === 'home'"></home>
    <about v-if="currentComponent === 'about'"></about>
  </div>
</template>

<script>
import home from "./components/home.vue";
import about from "./components/about.vue";

export default {
  components: {
    home,
    about,
  },
  data() {
    return {
      currentComponent: "home",
    };
  },
};
</script>

about.vue

<template>
  <p>about</p>
</template>

home.vue

<template>
  <p>home</p>
</template>

componentタグにis属性を用いて切り替える場合。

App.vue

<template>
  <div>
    <button @click="currentComponent = 'home'">home</button>
    <button @click="currentComponent = 'about'">about</button>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script>
import home from "./components/home.vue";
import about from "./components/about.vue";

export default {
  components: {
    home,
    about,
  },
  data() {
    return {
      currentComponent: "home",
    };
  },
};
</script>

切り替えた際にデータを保持しておく

componentタグで、コンポーネントを切り替えた場合、vueインスタンスのcreateとdestroyを行っている。そのため、非表示となったコンポーネントはdestroyされるため、データは保持されない。
keep-aliveタグで囲むことにより、destroyされずに値を保持しておくことができる。

<keep-alive>
  <component v-bind:is="currentComponent"></component>
</keep-alive>

切り替えの際に、処理を呼び出す場合

activatedメソッド、deactivatedメソッドを用いることにより、表示非表示切り替えの際の処理を定義することができる。

home.vue

<template>
  <p>home</p>
</template>
<script>
export default {
  activated() {
    console.log("activated");
  },
  deactivated() {
    console.log("deactivated");
  },
};
</script>