将数据从 Props 传递到 vue.js 中的数据

Question

我有以下 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 对象。除了标签和数据，我不希望其他组件改变任何东西，因此我想将标签和数据作为道具传递并在数据中使用它们。

我尝试将这些作为道具添加到此组件，然后在数据中分配它们，如下所示：

    props: 
['label']

然后在数据中：

label: labels

然而这不起作用

有什么建议可以实现吗？

Answer 1

道具声明如下：

props: ['label']

没有

props: {label}

这里正在工作fiddle：jsfiddle

Answer 2

听起来您只想修改 chartOptions 对象中的几个选项并将它们作为 CommitChart 组件传递。

export default {
  props:["label","data"],
  data() {
    return {
      chartOptions: {...},
    }
  },
  computed:{
    commitChartOptions(){
      let localOptions = Object.assign({}, this.chartOptions)
      localOptions.datasets[0].label = this.label;
      localOptions.datasets[0].data = this.data;
      return localOptions;
    }
  }
}

然后在您的模板中，使用 commitChartOptions 计算。

<CommitChart :data="commitChartOptions"></Commitchart>

这里 example 展示了这个概念。

Answer 3

export default {
  props: ['label'],
  data () {
    return {
      anotherLabel: this.label, // you cannot use the same name as declared for props
    }
  }
}

Answer 4

假设： labels 是数据和 label 是道具

然后用这个复制：

this.labels = { ...this.label };

将数据从 Props 传递到 vue.js 中的数据

Passing data from Props to data in vue.js

javascript

vue.js

vue-component