echarts点击事件中使用$emit得坑

最新推荐文章于 2024-05-24 21:42:59 发布

原创最新推荐文章于 2024-05-24 21:42:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在ECharts中实现双击事件，并通过Vue框架的$emit方法进行组件间的通信。解决了直接使用$emit导致TypeError的问题，通过保存当前上下文的方式确保了事件触发时this指向正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts点击事件中使用$emit

	//执行点击事件
	let that = this;  //解决this指向问题 TypeError: this.$emit is not a function
    myChart.on('dblclick', function (params) {
		console.log(params)
	  that.$emit("titleChanged","1")
}		
);

	},

如果直接写that.$emit(“titleChanged”,“1”)会报错！巨坑

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

稻城傲寒

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp+Echartsh子向父传值$emit失效

weixin_55553121的博客

01-06

2062

1.需求：点击柱状图的每一个柱子获取到 id（后台数据props传过来的） 2.失效原因：<script module='echarts' lang="renderjs"> 中不允许使用this.$emit 使用的话我这里是会报这样的错误：TypeError: Cannot read property 'nid' of undefined at view.umd.min.js:1 ,H5不会报错，APP上会报可以了解一下： renderjs内如何主动发起通讯？ - DCloud问答

uni-app 使用echart开发小程序遇到的坑

m0_46627254的博客

07-30

2724

最近一直在做小程序项目，导入eachat很坑，网上教程搜索一堆，但是基本没效果，所以坑了很久，才弄出来，真实有效的dome，按照 uni-app中使用Echarts的实践总结的步骤引用echarts 先在uni-app 创建一个文件夹，然后在命令行管理中进入到该目录下，执行 npm i 然后安装包 npm install echarts mpvue-echarts --save 安装完成了，得到这三个包剪切到这里然后开始使用 <template> <div class=

4 条评论您还未登录，请先登录后发表或查看评论

echarts添加点击事件

c_qianxia5040的博客

09-26

577

点击获取点击得对象，进而将需要的参数传给父组件，在父组件中再去请求接口获取更多信息。实现效果：点击图表，弹出该数据下对应得详情。

vue echarts图标按钮给父组件传递值 this.$emit is not a function

tenc1239的博客

08-14

600

2 父组件定义方法IsMultiChartEvent 监听emit 的updateIsMultiChart 事件 3 事件和监听方法绑定 -> 数据传递

echarts柱状图点击跳转页面或者点击执行某一个方法

m0_46348803的博客

03-08

1777

* 需求：echart表为店铺每个月的销售额，点击柱状跳转到【月报表页面】 **

解决Cesium引用Echarts显示未定义问题

专注GIS开发

01-22

1620

解决Cesium引用Echarts显示未定义问题

前端小知识----日常填坑

weixin_42507803的博客

06-27

390

1、移动端遇到的兼容问题（1）安卓浏览器看背景图片，有些设备会模糊：是devicePixelRatio在作怪；解决：背景图代替img标签，背景图是原图2倍，background-size:contain（2）手机中网页放大和缩小：<metaname="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1...

vue-seamless-scroll 从入坑到放弃

最新发布

qq_70010470的博客

05-24

853

## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的一旦组件开始更新主线程就一直被React控制这个时候如果再次执行交互操作就会卡顿页面首次渲染会创建一颗结构一模一样的的Fiber节点树 Fiber在update的时候会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化在更新结束后会取代之前的 Fiber节点树渲染过程采用切片的方式

echarts的一些技巧

SCUhzs

09-07

346

echarts的一些技巧

echart 在vue项目里的封装

一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html

05-09

1848

symbol

VUE中使用用ECharts组件

u010655588的博客

02-14

256

ECharts组件，自定义图例加载，子组件传值到父页面

this.$emit is not a function

素味平生的博客

07-25

5486

echart柱状图点击事件父子组件传参函数调用错误解决

Echarts 的点击事件 this指向问题

YZ_ZZZ24的博客

10-29

2122

myChart.on('click',function(params){ console.log(params); }); 这样写函数内的this指向会指向echarts实例（获取不到data里面的数据，console.log（this.xxx）为undefind）需要将该函数变为箭头函数 // 让其变为箭头函数，才能获取this（指向window） important!!! myChart.on('click',(params...

Echarts 点击事件无法使用this 或者 this无法使用

zuichu_2001的博客

03-30

1506

如以下代码所示 this.chart.on('click',function (param) { this.module = param.name; } 获取不到this.module 无法给model赋值说model找不到这时我们要在此方法外面把this获取出来 const _this = this; this.chart.on('click',function (param) { _this.module = param.name; } 这时就能获取到了 ...

Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“

星云

09-30

9349

症状一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function"，明显就是this指向问题，名为ajax的方法在父组件中，而this是子组件。  <template> … <el-pagination layout="prev, pager, next" :page-count=

【零散知识记录】

weixin_44167504的博客

08-05

1617

【零散知识记录】一、sort排序二、vue同一页面同一组件多用，页面互相影响问题三、vue $emit传递多个参数四、echarts5与水球liquidFill3五、postgresQL 六、路由监听七、多个form表单使用同一表单验证( iview )八、Viewer图片预览图片在弹出层之后九、postgreSQL实现主键ID自增十六、JS 定位相当于a标签href定位，优于a标签十七、vue之监听页面滚动十八、正则十九、多个drawer覆盖问题二十、WebStorm+egg 断点调试

Echarts各类图例的一些常见api用法以及踩坑

weixin_47353884的博客

08-31

2135

通过接口获取渲染Echarts的数据但是由于同异步的问题可能接口还没渲染出来就已经给子组件传值了给父组件加一个判断确认有值了再给子组件传值 <lineChart v-if="flag" :lineoption="lineoption"></lineChart> 在子组件上加一个监听确认有值之后再调用我们的方法 props: { lineoption: { typeof: Object, default: () => {

vue2全局事件总线中如何使用$emit接受对象

04-26

在Vue2的全局事件总线中，可以使用 `$emit` 方法触发一个事件，并通过 `$on` 方法来监听该事件。在事件的回调函数中，可以接收传递过来的对象作为参数。以下是一个示例代码： ```javascript // 在组件中触发事件 this.$emit('my-event', { name: '张三', age: 20 }); // 在另一个组件中监听事件 created() { // 监听 my-event 事件 this.$root.$on('my-event', this.handleMyEvent); }, methods: { handleMyEvent(data) { console.log(data); // { name: '张三', age: 20 } } } ``` 在上面的示例中，我们在一个组件中触发了 `my-event` 事件，并传递了一个对象作为参数。在另一个组件中，我们通过 `$on` 方法监听了该事件，并在回调函数中接收了传递过来的对象作为参数。