场景

SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121555526

在上面的博客页面是父组件，时间选择器是父组件的标签，柱状图是引用的子组件。

实现在父组件选择时间后调用子组件的方法重新渲染柱状图。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、子组件BarChartDataRange声明name属性

export default {
  name: "BarChartDateRange",
  data() {
    return {

2、父组件中引入子组件

import BarChartDateRange from "@/components/Echarts/BarChartDateRange";

export default {
  name: "Blog",
  components: {
    BarChartDateRange,
  },
  data() {
    return {

3、父组件中添加子组件显示并设置ref属性

ref="BarChartDateRange">

4、父组件中调用子组件方法

this.$refs.BarChartDateRange.getSelectedRangeList(val);

5、子组件完整代码

6、父组件完整代码