【Vue.js】動的コンポーネント

動的にコンポーネントを切り替える方法

componentタグとv-bind:is を使って切り替えを実装する

切り替えを行いたいコンポーネントをインポートしてcomponentsで定義させる。

import Aloha from "./components/Aloha.vue";
import Hello from "./components/Hello.vue";

// 中略
components: {
    CountHeader,
    Hello,
    Aloha,
}

今回はボタンを設けて、それぞれのボタンが押された時にそれぞれのコンポーネントを表示する仕組みにします。

<button @click="changeComponent = 'Hello'">hello</button>
<button @click="changeComponent = 'Aloha'">aloha</button>

クリックイベントの初期値を定義。

export default {
  data() {
    return {
      changeComponent:"Hello"
    };
  }
// 省略
}

クリックイベントが発生した際に、表示の切り替えをするテンプレートを追記。
ifで書いていくのが一般的ですが、Vueは一行で書くことができます。
ここで登場するのがcomponentタグとv-bind:isです。
v-bind:は「:」に省略可能なため、下記では省略型で書いています。

<component :is="changeComponent"></component>

テンプレートの全体像はこんなかんじ

<button @click="changeComponent = 'Hello'">hello</button>
<button @click="changeComponent = 'Aloha'">aloha</button>
<component :is="changeComponent"></component>

動的コンポーネントは切り替える度にdestroyされるので、データを残したい場合は、注意が必要。

destroyされる動的コンポーネントを保持する～keep-alive～

データを保持して動的コンポーネントを利用したい場合は、keep-aliveタグでcomponentタグを囲む。

<keep-alive>
  <component :is="changeComponent"></component>
</keep-alive>

切り替えの処理は、 deactivated と activated のライフサイクルフックが走る。
アクティブな時 = activated
切り替えられた時（表示されていない時） = deactivated

export default {
    deactivated(){
        // 処理を書き込む
    },
    activated(){
        // 処理を書き込む
    }
};