Vue.jsで親要素から子コンポーネントにデータを渡す（初心者の自分用まとめ）

単一データを渡して表示

ポイント

• 親側で、dataに渡したい要素を定義しておく
• 子側では、 {{ }} で囲ってシンプルに表示できる

ソース（親側）

<template lang="pug">
    ProductCard(v-bind:productName="productName")
<template>

<script>
export default {
  name: 'ProductIndex',
  components: {
    ProductCard
  },
  data () {
    return {
      productName: 'carrot cake'
    }
  }
}
</script>

注： ProductCard は、子コンポーネントの名前。

ソース（子側）

<template lang="pug">
div   {{ productName }}
</template>

<script>
export default {
  name: 'card',
  props: {
    productName: {
      type: String
    }
  }
}
</script>

複数データを配列（塊）として渡して表示

ポイント

• 親側で、配列をdataにて定義しておく
• 子側で、v-forを使う
• 子側では、配列は、 . （ドット）で要素にアクセスできる

ソース（親側）

<template lang="pug">
    ProductCard(v-bind:products="products")
<template>

<script>
export default {
  name: 'ProductIndex',
  components: {
    ProductCard
  },
  data () {
    return {
      products: [
        {
           productId: '1',
           productName: 'carrot cake'
         },
        {
           productId: '2',
           productName: 'spinach cookie'
         }
      ]
    }
  }
}
</script>

ソース（子側）

<template lang="pug">
div (v-for="product in products"
  p {{ productId }}
  p {{ productName }}
</template>

<script>
export default {
  name: 'card',
  props: {
    products: {
      type: Array
    }
  }
}
</script>