问题

一个很简单的this指向问题引起的报错:

记录下来主要是想看看这玩意到底指向哪里:

真不戳

解决方法

ES6的箭头函数,有人理解它就是没有this指向,我个人理解是它的this指向函数体的上一级。

也就是因为它没有this指向,它内部的this就会指向包裹它的函数,这样就能很轻松的指向vue了:

这样理解比较通俗易懂,由于是公司项目所以比较习惯贴马,意思到了就欧克。

- END -

AntDesign VUE:Model组件的Button的事件this指向undefined的问题(箭头函数)的更多相关文章

  1. vuex的简单例子和vue model组件

    好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...

  2. seventBus(封装) 一个巧妙的解决vue同级组件通讯的思路

    如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路.本人在写项目中琢磨出来的,感觉挺好用,分享一下. 1.在utils文件夹下添加BusEvent.js 注释已经很 ...

  3. 2-3 Vue实例中的数据,事件和方法

    上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...

  4. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  5. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  6. [转] vue父组件触发子组件事件

    1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template>     < ...

  7. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  8. vue兄弟组件传值——事件总线

    1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...

  9. AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)

    文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...

随机推荐

  1. K8S系列第九篇(持久化存储,emptyDir、hostPath、PV/PVC)

    更多k8s内容,请关注威信公众好:新猿技术生态圈 一.数据持久化 Pod是由容器组成的,而容器宕机或停止之后,数据就随之丢了,那么这也就意味着我们在做Kubernetes集群的时候就不得不考虑存储的问 ...

  2. Java数组05——Arrays类

    Arrays类讲解  package array; ​ import java.util.Arrays; ​ public class ArrayDemon07 {     public static ...

  3. 针对Cloud-init的可行性报告

    by hyc 针对Cloud-init的可行性报告 一.Cloud-init研究进展: (1)ubuntu镜像: 已在版本为ubuntu-server-14.04-amd64上实现了修改主机名和用户密 ...

  4. Java容器学习——List

    Java容器学习--List 基础知识 数组: ​ 优点:随机存取,可以快速访问元素 ​ 缺点:静态分配内存,存在空间闲置或者溢出现象:不适合进行插入和删除操作,需要移动大量元素. 链表: ​ 优点: ...

  5. RationalRose使用

    UML 概述 什么是 UML? Unified Modeling Language (UML)又称统一建模语言或标准建 模语言,是始于 1997 年一个 OMG 标准,它是一个支持模型化 和软件系统开 ...

  6. Android WorkManager使用入门

    WorkManager使用入门 WorkManager提供了任务调度功能,我们可以对工作进行标记或命名. 我们用一个示例来演示如何使用WorkManager.本文使用Kotlin. 入门示例 grad ...

  7. CGO入门和OCR文字识别(非第三方API,有源码,效果好)实战

    这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战 系列文章见: [第四天] GDB调试指南:C++中如何调试生产环境的程序? [第三天] IM敏感词算法原理和实现 [第二天] 现代IM架构研 ...

  8. COM笔记-类厂

    CoCreateInstance实际上并没有直接创建COM组件 ,而是创建了一个被称作是类厂的组件.而所需的组件正是由些类厂创建的.类厂组件的唯一功能就创建其他的组件.创建组件的标准接口是IClass ...

  9. c++与c#混合编程

    C#写界面比较方便,而C++则擅长写算法,所以将两者结合起来将会加快程序的开发速度,并保证程序的质量.但C#与C++的混合编程有很多细节问题需要注意,下面简要列举一些并指出相应的解决办法. 1. 将本 ...

  10. return 和 return false 的区别

    return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交. return false,事件处理函数会取消事件,不再继续向下执行.比如表单将终 ...