簡體   English   中英

如何在Vue中將多個道具從父組件傳遞給子組件

[英]How to pass multiple props from parent to child component in Vue

我試圖將兩個屬性從父級傳遞給子級,但由於某種原因,這不起作用,我發現的所有示例都引用了傳遞單個屬性。 我試圖做的是:

父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。 如果我執行完全相同的代碼並傳遞一個道具,它將返回預期的道具內容。 我錯過了什么?

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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM