鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

Vue.jsで親で定義したパラメータを子に渡して要素の表示を操作する(v-if)

やりたいこと

部品を呼び出す時に、カードなどの汎用性の高いものについては、最小公倍数的に要素を全て含めて部品を作っておいて、呼び出すパターンごとに、どの部品を表示するかを指定したい。

コンポーネントを作って呼び出す時に中の部品ごとの表示を指定したい
コンポーネントを作って呼び出す時に中の部品ごとの表示を指定したい

実現方法

ここで v-if という文法が活躍するのだと思う。 表示だけであれば、 v-show というのもあるようだが、今回は v-if を使った。

親から子へパラメータを渡してv-ifで要素の表示を操作
親から子へパラメータを渡してv-ifで要素の表示を操作

流れとしては、以下のようになると思う。

  • コンポーネント(子要素)を作る。その時、様々なパターンに応用できるように、細々した部品は最小公倍数的に全て入れ込んで作る。
  • 子要素の部品ごとに、 v-if をつけ、部品ごとに表示するフラグとなるプロパティを props 内で定義しておく
  • 親要素側で、子要素の呼び出すコードを書く。その時、子要素で定義したプロパティに渡す値を指定する
  • 親要素の data 内で、子要素に渡す実際の値を管理するコードを書く

実際のコード

<template lang="pug">
  ProductCard(
    :showRow1="showRow1",
    :showRow2="showRow2"
  )
</template>

import ProductCard '~/components/Card/ProductCard.vue';

<script>
export default {
  name: 'CardList',
  data() {
    return {
      showRow1: true,
      showRow2: false
    }
  }
}
</script>

コンポーネント

<template lang="pug">
  .row1(v-if="showRow1")
    span 一行目
  .row2(v-if="showRow2")
    span 二行目
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    showRow1: {
      type: Boolean,
      default: true
    },
    showRow2: {
      type: Boolean,
      default: true
    }
}
</script>