動的コンポーネントを使い表示内容を切り替える

動的コンポーネントを使い表示内容を切り替える

v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)

こんにちは!
てりーです(@teriteriteriri)。
今回はVue.jsで動的にコンポーネントを切り替える方法を見ていきます。

動的コンポーネントの使い方

:is=”変数”で切り替える

分かりやすい例です。
コンポーネントを呼び出す際に以下の様に書きます。

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

cardColorという変数を切り替えることによって、表示されるコンポーネントが変わってきます。
例えば今回cardRed、cordGreen、cardBlueというコンポーネントを作っていたら、クリック毎にcardColorがその3つのコンポーネントが表zされる様にすれば良いのです。

:isの特徴

切り替わるたびにインスタンスがdestroyedされる。
詳しくはライフサイクルを参照してほしい。
毎回新しいインスタンスを生成しなくてはいけないので、前のインスタンスでの状態が保存されていないことに注意。

keep-aliveでwrapする

:isで最後に出てきた問題を書き結する方法としてkeep-aliveがあります。
keep-aliveではインスタンスはdestroyedされずに、キャッシュされるのみである。なので、インスタンスの状態をそのまま受け継ぎながらコンポーネントの切り替えが可能。

使い方は以下の様にkeep-aliveでwrapするのみです。

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

動的コンポーネントを使ってカードを切り替える

完成品

・赤、青、緑の色のカードが出力される子コンポーネントを作る
・親コンポーネントにて、色のボタンを押すとその色が出力される

解説

子コンポーネントを作る

まず子コンポーネントとなるカードを作ります

<template>
  <div><h1>赤きカード</h1></div>
</template>
<style>
.h1{
 backgroud-color:red;
 color:#fff;
}
</style>
<template>
  <div><h1>青きカード</h1></div>
</template>
<style>
.h1{
 backgroud-color:blue;
 color:#fff;
}
</style>
<template>
  <div><h1>緑のカード</h1></div>
</template>
<style>
.h1{
 backgroud-color:green;
 color:#fff;
}
</style>

親コンポーネントを作る


<template>
  <section class="container">
    <button @click="colorRed">red</button>
    <button @click="colorBlue">blue</button>
    <button @click="colorGreen">green</button>
    <div class="content">
      <component :is="currentColor"></component>
    </div>
  </section>
</template>

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

export default {
  components: {
    cardRed,
    cardBlue,
    cardGreen
  },
  data() {
    return { 
      currentColor: 'cardRed' 
    }
  },
  methods: {
    colorRed() {
      this.currentcolor = "cardRed"
    },
    colorBlue() {
      this.currentColor = "cardBlue"
    },
    colorGreen() {
      this.currentColor = "cardGreen"
    }
  }
}
</script>

buttonを押すと、methodsに書いてある様に、押したボタンの色と同じ色のカードのコンポーネントが呼び出されます。

まとめ

この様に:is=”変数名”とコンポーネントにする事によって、外から動的にコンポーネントを変更することが可能です。

皆さんも使ってみてください。

Leave A Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping