[英]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.