Vue如何通过props传递复杂数据

Question

我想用echarts写个 柱状图组件

然后 data 里面的 chart数据 想要独立出来作为 自定义数据

然后要怎么处理比较好呢

只能通过props传值吗

<template>
    <div :id="id" class="chartbar" :style="{ background: bgColor, padding: padding }">

    </div>
</template>

<style lang="scss">
    @import '../assets/scss/all';
    .chartbar{
        @include panel; 
    }
</style>

<script>
import echarts from 'echarts'
export default {
  props: [ 'id', 'bgColor', 'padding' ],
  data: function () {
    return {
      chart: {
        title: '条形图',
        barColor: [ '#bfc2cd' ],
        xValue: [ '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子' ],
        yValue: [5, 20, 36, 10, 10, 20],
        seriesName: '销量'
      }
    }
  },
  mounted: function () {
    var chartBar = echarts.init(document.getElementById(this.id))
    var option = {
        //省略配置项
    }
    // 绘制图表
    chartBar.setOption(option)
  }
}
</script>

Answer 1

可以在父组件中调用子组件里 的方法，通过传参的方法传递自定义数据。

Answer 2

props: {
    chart: Object
}

chart再复杂也传得进来