【Vue】親から孫へとPropsを受け渡す方法

はじめに

本記事へのアクセスありがとうございます。
Atomic designの実装においてPropsによるデータの受け渡しが多発したので、親コンポーネントから孫コンポーネントまでの一連のデータの流れを備忘録も兼ねて記事に残したいと思います。
では、さっそく見ていきましょう。

親から孫コンポーネントへ

親コンポーネント

<template>
  <div>
    <child :parent-to-child-prop="sendData" />
  </div>
</template>
<script>
export default {
  components: {
    Child: () => import('@/components/Child')
  },
  data() {
    return {
      sendData: '親から孫へ'
    }
  }
}
</script>

子コンポーネント

<template>
  <div>
    <grand-child :child-to-grand-child-prop="parentToChildProp"/>
  </div>
</template>
<script>
export default {
  props: {
    parentToChildProp: {
      type: String,
      default: ''
    }
  },
  components:{
    GrandChild: () =>import('@/components/GrandChild')
  }
}
</script>

孫コンポーネント

<template>
  <div>
    {{ childToGrandChildProp }}
  </div>
</template>
<script>
export default {
  props: {
    childToGrandChildProp: {
      type: String,
      default: ''
    }
  }
}
</script>

おわりに

propsを用いるときはtypeとdefaultは設定しておきましょう。
また、テンプレート内にcomponentを書くときはケバブケースでpropsで貰って使うデータはキャメルケースで書くようにしています。
誰かのお役に立てれば幸いです🙇‍♂️