普通函数与箭头函数的问题

前端 专栏收录该内容
2 篇文章 0 订阅

普通函数 function () 与箭头函数()=>

我在开发前端涉及到了这个问题(vue+elementUi结合echarts时)
echarts添加了点击事件却无法调用vue实例中的方法
具体如下图:


Elementui弹出层

  <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-input v-model="name"></el-input>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

Echarts

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

Vue中Method区的方法(重点代码内容请看注释)

//渲染Echarts图表
drawLine() {
      var myChart = this.$echarts.init(document.getElementById("myChart"));
      let rest = this.echartsDate.LineDate2;
      const newOrg = this.objArrtransArr(rest, "orgName", "num");
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: newOrg,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      myChart.on("click", function (params) {	//图表点击事件!!!
        console.log("您点击了我");
        this.name = params.name;
        this.openDialog();//调用弹出层显示事件  !!!
      });
    },
    //弹出层显示事件!!!
 openDialog() {
      this.dialogVisible = true;
      console.log("openDialog", this.dialogVisible);
    },

当我们触发图表的点击事件时,然后会报错

在这里插入图片描述
找不到openDialog方法


咱们对点击事件进行修改如下

 drawLine() {
      var myChart = this.$echarts.init(document.getElementById("myChart"));
      let rest=this.echartsDate.LineDate2;
     const newOrg= this.objArrtransArr(rest,'orgName','num');
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: newOrg
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      myChart.on("click", (params) => {  //这里重点!!!
        console.log("您点击了我");
        this.name = params.name;
        this.openDialog();
      });
    },

再次执行后
在这里插入图片描述

由此得出:
1.普通函数中的this,表示的是本函数
2.箭头函数中的this,表示的是vue实例

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值