我有以下 vue 组件:
<template>
<div class ="container bordered">
<div class="row">
<div class="col-md-12">
<CommitChart :data="chartOptions"></Commitchart>
</div>
</div>
</div>
</template>
<script>
import CommitChart from './CommitChart';
export default {
data() {
return {
chartOptions: {
labels: ['pizza', 'lasagne', 'Cheese'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(10, 158, 193, 1)',
'rgba(116, 139, 153, 1)',
'rgba(43, 94, 162, 1)',
],
borderColor: [
'rgba(44, 64, 76, 1)',
'rgba(44, 64, 76, 1)',
'rgba(44, 64, 76, 1)',
],
borderWidth: 3
}],
},
};
},
components: { CommitChart },
};
</script>
<style scoped>
</style>
如您所见,该组件实际上是另一个组件 commitChart 的包装器。提交图表采用 chartOptions 的 json 对象。除了标签和数据,我不希望其他组件改变任何东西,因此我想将标签和数据作为 Prop 传递并在数据中使用它们。
我试着将这些作为 props 添加到这个组件,然后在数据中,分配它们,就像这样:
props:
['label']
然后在数据中:
label: labels
然而这是行不通的
有什么建议可以实现吗?
最佳答案
export default {
props: ['label'],
data () {
return {
anotherLabel: this.label, // you cannot use the same name as declared for props
}
}
}
关于javascript - 将数据从 Props 传递到 vue.js 中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43496656/