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

やりたいこと

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

実現方法

ここで v-if という文法が活躍するのだと思う。表示だけであれば、 v-show というのもあるようだが、今回は 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>