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

Vue.jsで、画面の一部のコンポーネントだけを、動的に切り替えたいと思った時に調べた内容です。

コンポーネントの切り替えには、component要素を使います。

スポンサーリンク

サンプルコード

まず、コンポーネントの切り替えを行う、メインページのサンプルコードです。

<template>
  <section class="container">
    <button @click="view1">１</button>
    <button @click="view2">２</button>
    <div class="content">
      <!--(1)component要素 (currentViewで指定されたコンポーネントを動的に表示する) -->
      <component :is="currentView"></component>
    </div>
  </section>
</template>

<script>
import Component1 from '~/components/Component1.vue'
import Component2 from '~/components/Component2.vue'

export default {
  components: {
    Component1,
    Component2
  },
  data() {
    return { 
      //(2)表示するコンポーネント名を指定します。
      currentView: 'component1' 
    }
  },
  methods: {
    //(3)ボタンクリックで表示するコンポーネントを切り替える
    view1() {
      this.currentView = "component1"
    },
    view2() {
      this.currentView = "component2"
    }
  }
}
</script>

[Component1.vue]

<template>
  <div><h1>Home Page</h1></div>
</template>

[Component2.vue]

<template>
  <div>SubPage</div>
</template>