如何在Vue中将多个道具从父组件传递给子组件 [英] How to pass multiple props from parent to child component in Vue
问题描述
我正在尝试将两个属性从父级传递给子级，但由于某种原因，这不起作用，我发现的所有示例都涉及传递单个属性.我试图做的是:
父 vue 组件:
<div class="statistics_display"><multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart></模板>
multiLineChart vue 组件:
出口默认{name: '多线图',道具:['rowsA'，'rowsB']，安装:功能(){控制台日志(this.rowsA)；}控制台日志返回未定义.如果我执行完全相同的代码并传递单个道具，它会返回预期的道具内容.我错过了什么?
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', {模板:#mtemplate"，道具:['rowsA'，'rowsB']，安装:功能(){console.log(this.rowsA, this.rowsB);}})新的 Vue({el: '#app',数据: {阅读:{A:{price_stats:11}，B:{price_stats:22}}}});<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></脚本><div id="应用程序"><div class="statistics_display"><multiLineChart :rows-a="reading['A'].price_stats" :rows-b="reading['B'].price_stats"></multiLineChart><模板 id="mtemplate"><div>我是多折线图</div></template>
I'm trying to pass two properties from parent to child, but for some reason this isn't working and all the examples I've found refer to passing a single property. What I've tried to do is:
Parent vue component:
<template>
<div class="statistics_display">
<multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart>
</div>
</template>
multiLineChart vue component:
export default {
name: 'MultiLineChart',
props: ['rowsA', 'rowsB'],
mounted: function() {
console.log(this.rowsA);
}
the console log is returning undefined. If I executethe exact same code and pass a single prop, it returns the expected prop contents. What am I missing?
HTML attributes are case-insensitive, so
<multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart>
Are actually bound to props: ['rowsa', 'rowsb'].
If you want props: ['rowsA', 'rowsB']to work, use, in the template: :rows-a="..." and :rows-b="...".
See it working below.
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>
这篇关于如何在Vue中将多个道具从父组件传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
