如何在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);
  }

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

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="..."。

见下面的工作。

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>