Vue.js中如何通过Props为ApexChart动态传参并封装组件？

一、修正Props的绑定方式 #

你当前代码里的type="{{type}}"和height="{{height}}"用了插值语法，会把值当成静态字符串传递，无法实现动态绑定。ApexChart组件的type、height本身支持响应式props，需要用**v-bind（简写为冒号）**来绑定：

<apexchart 
  :type="type"
  :height="height"
  ref="centerProjectTreemap"
  :options="chartOptions"
  :series="series"
></apexchart>

二、完整封装的ApexChart组件示例 #

可以把需要动态控制的参数都定义为props，甚至将chartOptions和series也暴露出去，让父组件灵活控制：

<template>
  <div>
    <apexchart 
      :type="type"
      :height="height"
      :options="chartOptions"
      :series="series"
    ></apexchart>
  </div>
</template>

<script>
export default {
  name: "ParamChart",
  props: {
    // 图表类型作为首个props，可设置默认值
    type: {
      type: String,
      required: true,
      default: 'line'
    },
    height: {
      type: Number,
      default: 300
    },
    // 允许父组件传递自定义配置
    chartOptions: {
      type: Object,
      default: () => ({})
    },
    // 图表数据系列，必填项
    series: {
      type: Array,
      required: true
    }
  }
}
</script>

三、动态更新参数的方式 #

1. Props响应式更新：Vue的props是响应式的，当父组件传递的type、height、chartOptions或series变化时，ApexChart会自动更新渲染。比如父组件中切换图表类型：

<template>
  <div>
    <button @click="chartType = 'bar'">切换为柱状图</button>
    <button @click="chartType = 'pie'">切换为饼图</button>
    <ParamChart 
      :type="chartType" 
      :height="350" 
      :chart-options="myOptions" 
      :series="mySeries" 
    />
  </div>
</template>

<script>
import ParamChart from './ParamChart.vue'

export default {
  components: { ParamChart },
  data() {
    return {
      chartType: 'bar',
      myOptions: {
        xaxis: {
          categories: ['一月', '二月', '三月']
        }
      },
      mySeries: [{ name: '销量', data: [100, 200, 150] }]
    }
  }
}
</script>

2. 手动调用实例方法：如果需要更精细的局部更新，可以通过ref获取ApexChart实例，调用其内置方法：

// 在封装的ParamChart组件中添加方法
methods: {
  updateChartColors(newColors) {
    this.$refs.centerProjectTreemap.updateOptions({ colors: newColors })
  }
}

// 父组件中调用
this.$refs.myParamChart.updateChartColors(['#ff0000', '#00ff00'])

四、父组件中使用封装后的组件 #

直接传递所需参数即可，注意数值类型的props（比如height）要加冒号绑定，避免传递字符串：

<ParamChart 
  type="bar" 
  :height="350" 
  :chart-options="customOptions" 
  :series="chartSeries" 
/>

内容的提问来源于stack exchange，提问作者MP3K