vue一个页面中分多个模块，使用组件写法

index.vue页面

<dataItem 
     v-for="(item,index) in dataItemParams" 
     :key="item.name"
     :name="item.name"
     :type="item.type"
     :iconName="item.iconName"
     :value="staticIndexData[index]"
     :unit="item.unit"
     :settings=“item.settings”
     :iconColor="item.iconColor"
     @click="handleClickItem(item)"
     >
</dataItem>


import dataItem from '@/components/dataItem'


data(){
   staticIndexData:[0,0,0]
   dataItemParams:{[
      {name:'信号',value:'123',color:'#fff',settings:{width:140px}},
      {name:'配时',value:'124',color:'#fff',settings:{width:140px}},
      {name:'方案',value:'124',color:'#fff',settings:{width:140px}}
  ]
 }

components/dataItem页面

<div :style="`height:${settings.height||''};width:${seetings.width||''}`" @click="handleClick">
  <img :src="base64Config[`${iconName}`]" alt="" />
  <div class="name">{{name}}</div>
  <div class="value" :style="`color:${settings.color||''}`">{{value}}</div>
  <div class="unit">{{unit}}</div>
</div>


import base64Config from '@/config/base64Config'

data() {
    return {
      base64Config,
    }
  },
props: ['settings', 'name', 'value', 'unit', 'iconName'],
methods: {
    handleClick() {
      console.log('click-it')
      this.$emit('click')
    },
  },