如何在Vue中将多个道具从父组件传递给子组件

Question

I'm trying to pass two properties from parent to child, but for some reason this isn't working and all the examples I've found refer to passing a single property. What I've tried to do is:

Parent vue component:

<template>
  <div class="statistics_display">
    <multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart>
  </div>
</template>

multiLineChart vue component:

export default {
  name: 'MultiLineChart',
  props: ['rowsA', 'rowsB'],
  mounted: function() {
      console.log(this.rowsA);
  }

the console log is returning undefined. If I executethe exact same code and pass a single prop, it returns the expected prop contents. What am I missing?

Answer 1

HTML attributes are case-insensitive, so

<multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart>

Are actually bound to props: ['rowsa', 'rowsb'] .

If you want props: ['rowsA', 'rowsB'] to work, use, in the template: :rows-a="..." and :rows-b="..." .

See it working below.

 Vue.component('multilinechart', { template: "#mtemplate", props: ['rowsA', 'rowsB'], mounted: function() { console.log(this.rowsA, this.rowsB); } }) new Vue({ el: '#app', data: { reading: {A: {price_stats: 11}, B: {price_stats: 22}} } }); 

 <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script> <div id="app"> <div class="statistics_display"> <multiLineChart :rows-a="reading['A'].price_stats" :rows-b="reading['B'].price_stats"></multiLineChart> </div> </div> <template id="mtemplate"> <div>I'm multilinechart</div> </template>