VUE——添加组件模块（图表）

Vue是由一个个小模块组成的，模块可以让页面简介还可以复用：

1、不固定数据数量传到子组件

父组件：

<chartVue v-for="(item, index) in chartList" :key="index" :dtu-id="item.dtuId" :name="item.name" :dtu-fatcor="item.dtuFatcor" :data="item.data" :data-type="item.dataType" style="width:1000px;height:400px;" />

<script>

     import echarts from 'echarts'      import chartVue from '@/views/history/chart'      import { flatMap, toArray } from 'rxjs/operators'

   export default{
        components:{ chartVue },
        data(){
            chartList: [],        
        },
        //方法
        methods: {
             // from方法解析数组
             from(factor(id)).pipe(
                 flatMap(value=>{
                      this.chartList = []
                      if(value.code == 200){ 
                           return from(value.data)
                       }
                  }),
                  toArray(),
                  map(val =>{
                       this.chartList = val
                       return val
                  })
              ).subscibe() 
        }
    }
script>                                    

子组件（ref接收的值是不固定的）：