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

【问题标题】：How to pass multiple props from parent to child component in Vue如何在Vue中将多个道具从父组件传递给子组件
【发布时间】：2018-08-11 06:40:28
【问题描述】：

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

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

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

【问题讨论】：

可能因为reading['A'].price_stats 未定义而导致未定义？
['rowsA, rowsB'] - 这意味着一个具有一个字符串值'rowsA, rowsB' 的数组。只需删除引号即可。
是的，^这个
@oniondomes 这实际上是简化代码的一个错字。感谢您指出。
那么你有一个有效的代码。 @samayo 可能是对的，您可能对 reading['A'].price_stats 没有任何价值。进行一些测试或尝试在另一个环境中重现错误。

标签： vue.js

【解决方案1】：

HTML 属性不区分大小写，所以

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

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

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

看看它在下面的工作。

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>

【讨论】：