Vue3+Echarts实战：玩转Props被动更新、Refs、Emit和监听“空白处”事件

前端

2024-01-06 15:17:00

前言

需求是这样的，我要在当前组件生成一个柱状图来渲染我的数据，点击柱状图上的某一列作为查询条件对表格内的数据更改。我将Echarts作为子组件放在当前组件中，这就涉及到了父子组件传值，props被动更新、refs以及父子组件事件通信等知识点。

Props被动更新

在Vue3中，props是父子组件通信的一种方式，它允许父组件向子组件传递数据。在子组件中，props是只读的，这意味着不能直接修改props的值。如果父组件更新了props的值，那么子组件的props也会相应地更新。

在我们的需求中，父组件需要将数据传递给Echarts子组件，并根据父组件数据的变化更新Echarts的图表。为了实现这一点，我们可以使用props的被动更新特性。

被动更新是指，当父组件更新了props的值时，子组件的props也会相应地更新。这是一种单向的数据流，这意味着子组件不能直接修改props的值，只能被动地接收父组件传递的数据。

Refs

在Vue3中，refs是获取组件实例的一种方式。我们可以通过refs来访问组件的实例，并对组件进行操作。在我们的需求中，我们需要获取Echarts子组件的实例，以便对Echarts的图表进行操作。

我们可以使用ref属性来获取组件的实例。在父组件中，我们可以这样使用ref属性：

<Echarts ref="echarts"></Echarts>

这样，我们就可以在父组件中通过this.$refs.echarts来访问Echarts子组件的实例。

Emit

在Vue3中，emit是父子组件通信的一种方式。它允许子组件向父组件发送事件。在我们的需求中，Echarts子组件需要向父组件发送事件，以便父组件更新表格数据。

我们可以使用emit方法来发送事件。在子组件中，我们可以这样使用emit方法：

this.$emit('updateTable', data);

这样，我们就向父组件发送了一个名为'updateTable'的事件，并传递了data数据。

监听“空白处”事件

在我们的需求中，我们还需要监听Echarts的“空白处”事件，以便在用户点击Echarts的空白处时更新表格数据。

我们可以使用@click.self来监听Echarts的“空白处”事件。在子组件中，我们可以这样使用@click.self来监听“空白处”事件：

<div @click.self="handleEmptyClick"></div>

这样，我们就监听了Echarts的“空白处”事件，当用户点击Echarts的空白处时，就会触发handleEmptyClick方法。

完整代码示例

<!-- 父组件 -->
<template>
  <div>
    <Echarts ref="echarts"></Echarts>
    <Table :data="tableData"></Table>
  </div>
</template>

<script>
import Echarts from './Echarts.vue';
import Table from './Table.vue';

export default {
  components: { Echarts, Table },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getEchartsData();
  },
  methods: {
    getEchartsData() {
      // 获取Echarts数据
      this.$refs.echarts.getEchartsData().then((data) => {
        this.tableData = data;
      });
    },
    handleUpdateTable(data) {
      // 更新表格数据
      this.tableData = data;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <div @click.self="handleEmptyClick"></div>
    <echarts :options="options"></echarts>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['data'],
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 初始化Echarts图表
      this.options = {
        xAxis: {
          type: 'category',
          data: this.data.map((item) => item.name),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.data.map((item) => item.value),
            type: 'bar',
          },
        ],
      };
    },
    getEchartsData() {
      // 获取Echarts数据
      return new Promise((resolve) => {
        resolve(this.data);
      });
    },
    handleEmptyClick() {
      // 处理“空白处”点击事件
      this.$emit('updateTable', []);
    },
  },
};
</script>