Vue踩坑 methods中使用ES6箭头函数

最新推荐文章于 2024-04-12 18:28:14 发布
最新推荐文章于 2024-04-12 18:28:14 发布
阅读量1.5k 收藏 3
点赞数 4
分类专栏： 开发日常
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41629522/article/details/107249777
版权

今天本来想骚操作一番，在vue 的methods中使用ES6的箭头函数，没想到遇到了问题
在这里插入图片描述
在这里插入图片描述
结果打印出来的是undefined. 想半天不知道为什么。
后来才知道因为箭头函数改变了this的指向。正常的es5函数去写的话，里面的this指向的是，而箭头函数是没有自己的this的，要去函数外层寻找，也就是在methods中去寻找，显然methods里面没有data，就是undefined，如果是普通的函数的话，那么this指向的是它的调用者，也就是这个vue实例化的对象，它的上面有data，methods，生命周期函数等属性以及方法

qq_41629522
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析vue data不可以使用箭头函数问题
08-27
Vue 中 data 不可使用箭头函数问题解析 在 Vue 中，data 属性不能使用箭头函数，这是因为箭头函数的 this 指向问题。在 JavaScript 中，非严格模式下，函数都会有一个 this 指向，但是箭头函数的 this 指向的是定义...
浅谈Vue中render中的h箭头函数
01-19
vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是：(只有一个个return语句，...
新手学习VUE踩坑之旅---methods里面使用箭头函数要注意this
qq_39293724的博客
12-19 3341
VUE的methods对象里面如果函数使用箭头函数会导致this指向的不是vue实例$vm 例子：想写一个点击事件：点击输入框的“x”,即可清空文本框的内容 首先为输入框增加一个ref属性（ref=“inputUser”），然后为“x”加一个点击事件（@click=“deleteInp”） methods中使用普通函数： methods: { deleteInp : func...
methods中的箭头函数
孩子不懒的博客
02-23 698
methods 中配置的函数，不要用箭头函数?
最新发布
思索的涟漪，突破自我
04-12 700
中的函数通常需要访问组件实例（也就是 VM，即 ViewModel）的属性和方法，例如。将不再指向组件实例，而是继承自其外部作用域，可能会导致意外的行为或错误。中的方法，因为 Vue 在调用这些方法时会确保将正确的上下文绑定给。这是因为箭头函数在定义时会捕获其上下文的。这样可以确保在方法内部能够正确地访问组件的属性和方法。中使用箭头函数，以免造成意外的行为和错误。指向组件实例，应该使用普通函数来定义。在 Vue.js 中，确实不建议在。，而是继承自外部作用域的。中的函数，那么函数中的。在 Vue 组件中，
在vue2.x methods中使用ES6箭头函数踩的坑，所有方法里的this指向“a”中
经验之谈，不做搬运工
06-17 366
> 背景：vue2.5.2项目 > 定位： methods方法集 > 问题：在methods中使用了ES6箭头函数，this指向多了一层“a” ### 技术定义 > ES6箭头函数内部没有this指向，箭头函数内部this指向只能通过查找作用域链来决定，一旦使用箭头函数当前就不存在作用域链。 ### 问题分析 > this指向多了一层“a”，这里的a，并不是vue对象
为什么在vue中的methods中箭头函数的this指向undefined
u598975767的专栏
04-27 7979
先声明，本文站在巨人的肩膀上发散的思维。如题，首先this不会是vm，这一点很笃定。但为何是undefined不是window,想着有些困惑。 搞明白这个，首先得晓得这几个前提： 1.箭头函数的this是在定义函数时继承了其父级作用域的this，不是在执行过程中绑定的。 2.vue默认开启了严格模式。 3.全局作用域下的函数中使用this，在严格模式下this指向undefined 以上...
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7193
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
vue踩坑记-在项目中安装依赖模块npm install报错
10-17
主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中的methods方法使用技巧,三分钟迅速读懂
qq_42176665的博客
11-09 1万+
关于vue中methods的使用技巧
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 7932
常规遍历方法 for i forEach 箭头函数=> for of 遍历 for in 遍历 for in 遍历的 是 数组下表 ,适合 遍历集合 箭头函数=> ES6标准新增了一种新的函数：Arrow Function（箭头函数） 基础语法 var fn1 = function(a, b) { return a + b } function fn2(a, b) { return a + b } 使用ES6箭头函数语法定义函数，将原函数的“func
vue的学习笔记（12）之箭头函数
肿肿的博客
02-02 6223
箭头函数1、箭头函数的使用2、箭头函数参数和返回值3、箭头函数中的this 1、箭头函数的使用 定义函数有三种方式： <script> //箭头函数：也是一种定义函数的方式 //1.定义函数的方式：function const aaa=function () { } //2.对象字面量中定义函数 const obj={ bbb: function () { }, ccc() { } } //3.es6中的箭头函数 // const ddd=(参
vue的methods里面的函数使用箭头函数
np918的博客
08-01 4437
Vue里面methods对象里面如果使用箭头函数会导致this指向不是vue实例，而是一个xxx.a的一个类，尽量不要在vue所定义的字段里面使用箭头函数。 由此可见，vue中的自带方法使用箭头函数会出现各种错误，慎用！！！ ...
vue中的方法 methods 定义时不要使用箭头函数
热门推荐
hjh15827475896的博客
03-24 1万+
今天在vue中引入vuex的时候出现了错误，解决了一个多少时，总结如下： vuex 的使用： vuex就是一个状态管里中心 也好比一个仓库 细分可分为五个部分，这是我不考虑 module 分别是 state geters setter mutations actions state 就是要存入的数据 getters setters 就不用多说的，是获取和设置数据用的 mutation...
Vue中为什么不能使用箭头函数来定义methods函数（详解）
王光迪的CSDN
06-03 3325
Vue中为什么不能使用箭头函数来定义methods函数（详解）
Vue的methods里面不可以使用箭头函数
Stone
04-28 3316
Vue的methods里面不可以使用箭头函数 vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined methods: { test: () => { console.log(this); // undefined } } 箭头函数没有this，this其实是外部的this，即箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重
Vue进阶（十九）： ES6 箭头函数
IT全栈 华强工作室
12-20 5157
基本用法：ES6中允许使用“箭头”(=&gt;)定义函数var f = v =&gt; v; 上面代码相当于：var f = function( v ) { return v; }根据箭头函数有参数和无参数来区分1、无参数的箭头函数var f = () =&gt; 5;等同于var f = function() { return 5};2、有参数的箭头函数var sum = ( a, b)...
vue中methods为什么不能是箭头函数？
coderheart的博客
06-02 564
vue中方法不能是箭头函数
vue+ES6+箭头函数+this
qq_38799387的博客
07-03 494
vue+ES6+箭头函数下的this作用域理解 v做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，导致浏览器报错。这是后axios内部的this打印出来是undefined。 想要在回调函数中直接使用this，需要在外部用一个临时变量接收：类似var that=this； 但是在使用箭头函数的回调函数中。this已经绑定了外部的vue实例。箭头函数内部的this是词法作用域，由上下文确定。 ...
为什么VUE的methods不能用箭头函数
03-27
而VUE的methods中需要使用this来访问组件的数据和方法，因此不能使用箭头函数。如果使用箭头函数，this将指向全局对象window，而不是组件实例，会导致访问数据和方法出错。所以在VUE中，应该使用普通的函数来定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值