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

Question

我试图将两个属性从父级传递给子级，但由于某种原因，这不起作用，我发现的所有示例都涉及传递单个属性。我试图做的是：

父 vue 组件：

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

multiLineChart vue 组件：

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

控制台日志返回未定义。如果我执行完全相同的代码并传递单个道具，它会返回预期的道具内容。我错过了什么？

Answer 1

HTML 属性不区分大小写，因此

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

实际上是绑定到props: ['rowsa', 'rowsb'].

如果您想props: ['rowsA', 'rowsB']工作，请在模板中使用：:rows-a="..."和:rows-b="..."。

请参阅下面的工作。

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

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}}
  }
});