はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回の記事では動的コンポーネントを用いてコンポーネントを入れかえる方法を記載します。

componentタグを利用する

動的にコンポーネントを入れかえる場合はcomponentタグを用いると便利です。
記法は以下の通りでisという属性を用いて任意のコンポーネントを指定します。

<template>
  <component v-bind:is="任意のコンポーネント名"></component>
</template>

注意点

しかしながらコンポーネントを入れかえた際に切り替わる前のデータは消えてしまうため、フォームに使用するタグinputやtextarea等を利用する場合にはkeep-aliveコンポーネントを用いる必要があります。

<template>
  <keep-alive>
    <component v-bind:is="任意のコンポーネント名"></component>
  </keep-alive>
</template>

ライフサイクルフック

上記で記載したkeep-aliveコンポーネントで囲んだコンポーネントではactivatedとdeactivatedというライフサイクルフックが呼び出されます。
activatedは対象のコンポーネントがアクティブになったときに動き、deactivatedは対象のコンポーネントが非アクティブになったときに動きます。

以上を用いてサンプルを作ってみる

以上をふまえて、それらを利用した簡単なサンプルを作ってみます。
今回は「おはようボタン」「こんにちはボタン」を作り、それらのボタンを押すとそれぞれのコンポーネントが出力されるという感じにしたいと思います。
ライフサイクルフックの動きも見ておきたかったので、「こんにちはコンポーネント」がアクティブになった場合と非アクティブになった場合にアラートが呼び出されるようにしてみました。

<template>
  <div>
    <button @click="greetComponent = 'Morning'">おはようコンポーネント</button>
    <button @click="greetComponent = 'Afternoon'">こんにちはコンポーネント</button>
    <keep-alive>
      <component v-bind:is="greetComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import Morning from "./components/Morning.vue";
import Afternoon from "./components/Afternoon.vue";

export default {
  data() {
    return {
      greetComponent: "Morning",
    };
  },
  components: {
    Morning,
    Afternoon,
  },
};
</script>

<template>
  <div>おはよう！</div>
</template>

<template>
  <div>こんにちは！</div>
</template>

<script>
export default {
  activated() {
    alert("こんにちはコンポーネントが開きました！");
  },
  deactivated() {
    alert("こんにちはコンポーネントが閉じました。");
  },
};
</script>

結果

デフォルトはおはようコンポーネントが出力されるようにしています。

「こんにちはコンポーネント」ボタンをクリックするとライフサイクルフックのactivatedが呼び出されていることが分かります。

アラートを閉じた後、コンポーネントがこんにちはコンポーネントに変更されていることが分かります。

次に「おはようコンポーネント」ボタンをクリックするとライフサイクルフックのdeactivatedが呼び出されていることが分かります。

アラートを閉じた後、コンポーネントがおはようコンポーネントに変更されていることが分かります。

おわりに

今回は動的にコンポーネントを入れかえる方法を学びました。
これがSPAを作る上での基礎なのかな・・・と思ったり。

だいぶ楽しいフィールドへ入ってきた感じがするので引き続きしっかり学んでいこうと思います！