鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

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

単一データを渡して表示

ポイント

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

f:id:TACOSVilledge:20181102162141j:plain

ソース(親側)

<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を使う
  • 子側では、配列は、 . (ドット)で要素にアクセスできる

f:id:TACOSVilledge:20181102162149j:plain

ソース(親側)

<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>