📚

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

2022/09/19に公開約1,500字

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

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

ワイ「えっと・・・」

親コンポーネント
<template lang="pug">
ul
  NavLink
  NavLink
  NavLink
  NavLink
</template>

スクリーンショット 2022-03-25 0.14.33.png

ワイ「まあそうなるわな」
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>

スクリーンショット 2022-03-25 0.10.36.png

ワイ「できました!」
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>

スクリーンショット 2022-03-25 0.10.36.png

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

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

おわり

Discussion

ログインするとコメントできます