Vue「親コンポーネントでリストレンダリングして子コンポーネントのプロパティに値を渡せ」ワイ「？？？」

ナビバーのコンポーネントを作っていたら。。。

ワイ「よし、ナビバーのコンポーネントできたで。それぞれのリンクもコンポーネントに分割したしアトミックデザイン準拠やな」
Vue「で？」

ワイ「えっと・・・」

親コンポーネント

<template lang="pug">
ul
  NavLink
  NavLink
  NavLink
  NavLink
</template>

ワイ「まあそうなるわな」
Vue「プロパティ使え」

子コンポーネント

<template lang="pug">
li <a class="active" href="#"> {{ linkName }} </a>
</template>

<script>
export default {
  props: {
    linkName: String,
  }
}
</script>

ワイ「できました」
Vue「で？」

親コンポーネント

<template lang="pug">
ul
  NavLink(linkName='Home')
  NavLink(linkName='About')
  NavLink(linkName='Member')
  NavLink(linkName='Services')
</template>

ワイ「できました！」
Vue「はぁ（クソデカため息）」

ワイ「なんスか。まだなんか文句あるんスか。見た目は問題ないじゃないスか」
Vue「リストレンダリング」

ワイ「！？」

親コンポーネント

<template lang="pug">
ul
  NavLink(v-for="link in links" :key="link.name" v-bind:linkName='link.name')
</template>

<script>
export default {
  data() {
    return {
      links: [
        { name: 'Home' },
        { name: 'About' },
        { name: 'Member' },
        { name: 'Services' }
      ]
    }
  }
}
</script>

ワイ「こうっスね」
Vue「まあええやろ。項目がもっと増えたらDBにデータ入れて引っ張ってこなキツイやろけど」

ワイ「シャス！　その時はまたオナシャス！」

おわり