Vue中父組件調用子組件的方法

場景

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屬性

<BarChartDateRange ref="BarChartDateRange"></BarChartDateRange>

4、父組件中調用子組件方法

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

5、子組件完整代碼

<template>
  <div :style="{ height: '300px', width: '300px' }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import request from '@/utils/request'
import { formatDate } from "@/utils/index";

export default {
  name: "BarChartDateRange",
  data() {
    return {
      chart: null,
      typeData: [
        { product: "2021.11.23", 博客數: 20 },
        { product: "2021.11.24", 博客數: 30 },
        { product: "2021.11.25", 博客數: 35 },
        { product: "2021.11.26", 博客數: 43 },
      ],
      yAxisMax: 0,
      queryParam: {
        beginDate: null,
        endDate: null,
      },
    };
  },
  created() {
    //默認開始時間為一周前
    this.queryParam.beginDate = formatDate(
      new Date().getTime() - 60 * 1000 * 60 * 24 * 6
    );
    //默認結束時間時間當前時間
    this.queryParam.endDate = formatDate(new Date().getTime());
    this.getList().then((response) => {
      var res = response.data;
      if (res) {
        //清空柱狀圖的數據源
        this.typeData = [];
        //遍歷后台響應數據，構造柱狀圖數據源
        for (var key in res) {
          this.typeData.push({ product: key, 博客數: res[key] });
        }
      }
      this.initChart(this.typeData);
    });
  },
  mounted() {},
  methods: {
    //調用后台接口查詢數據
    getList() {
      return request({
        url: "/system/blog/list",
        method: "get",
        params: this.queryParam,
      });
    },
    //父組件調用子組件的該方法進行重新渲染柱狀圖
    getSelectedRangeList(range) {
      var startDate = range[0];
      var endDate = range[1];
      this.queryParam.beginDate = startDate;
      this.queryParam.endDate = endDate;
      this.getList().then((response) => {
        var res = response.data;
        if (res) {
          this.typeData = [];
          for (var key in res) {
            this.typeData.push({ product: key, 博客數: res[key] });
          }
        }
        this.initChart(this.typeData);
      });
    },
    initChart(typeData) {
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐標軸指示器，坐標軸觸發有效
            type: "shadow", // 默認為直線，可選為：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          //圖例
          data: ["博客數"],
        },
        xAxis: [
          {
            type: "category",
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "單位：(條)",
            min: 0,
            max: 30,
            interval: 10,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        dataset: {
          source: typeData,
        },
        series: [
          {
            name: "博客數",
            type: "bar",
            barWidth: "40%",
          },
        ],
      });
    },
  },
};
</script>

6、父組件完整代碼

<template>
  <div>
    <div>
      <BarChartDateRange ref="BarChartDateRange"></BarChartDateRange>
    </div>
    <div class="block">
      <el-date-picker
        size="large"
        type="daterange"
        v-model="value1"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        @change="dateSelectChange"
        :value-format="dateFormat"
      >
      </el-date-picker>
    </div>
  </div>
</template>
<script>
import BarChartDateRange from "@/components/Echarts/BarChartDateRange";

export default {
  name: "Blog",
  components: {
    BarChartDateRange,
  },
  data() {
    return {
      value1: "",
      dateFormat: "yyyy-MM-dd",
    };
  },
  created() {
  },
  methods: {
    /** 查詢博客列表 */
      dateSelectChange(val) {
      if (val) {
        var startDate = new Date(val[0]).getTime();
        var endDate = new Date(val[1]).getTime();
        debugger;
        if (endDate - startDate > 6 * 24 * 60 * 60 * 1000) {
          this.$message({
            message: "所選時間范圍不能大於7天",
            type: "warning",
          });
        }else{
           this.$refs.BarChartDateRange.getSelectedRangeList(val);
        }
      }
    },
  },
};
</script>