vue 事件绑定使用箭头函数（this指向带来的缺陷）

最新推荐文章于 2023-02-25 23:25:24 发布
最新推荐文章于 2023-02-25 23:25:24 发布
阅读量1.7k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44477873/article/details/110739529
版权
在Vue组件开发中，使用箭头函数进行事件处理导致`this`指向错误，引发`TypeError: Cannot read property 'link' of undefined`。通过检查发现，箭头函数内的`this`并不指向组件实例，解决方案是避免使用箭头函数或在外部保存`this`引用。

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

使用vue组件化开发的过程中，遇到的问题

组件props传入数据：
组件props传入数据
组件内部结构：
在这里插入图片描述
props成功传入：
在这里插入图片描述
但是事件处理却失败：
在这里插入图片描述
在这里插入图片描述
根据报错信息:
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘link’ of undefined” 可知，this.link为undefined。
分析之后，直接打印 this ，查看指向是否正确：
在这里插入图片描述

最低0.47元/天 解锁文章
Vue3 + TS（一）- 邂逅Vue
weixin_51349592的博客
06-22 701
Vue3+TS课程学习中的一些记录
vue笔记详解
weixin_51261234的博客
12-01 5674
vue 文章目录vue第一篇：邂逅vue为什么学习Vuejs？简单的认识一下Vue.jsVue.js安装Vue的初体验Vue中的MVVM创建Vue实例传入的optionsVue的生命周期第二篇：基础语法插值操作1.Mustache2.v-once3.v-html4.v-text5.v-pre6.v-clock绑定属性：1.v-bind介绍和使用v-bind基础v-bind绑定class绑定方式：对象语法绑定方式：数组语法v-bind绑定style绑定方式一：对象语法绑定方式二：数组语法计算属性1.什么是计算
vue 中watch函数名_Vue watch侦听器中的函数与箭头函数
weixin_39549312的博客
12-21 586
S6用的越来越多，箭头函数写顺了，函数大部分都写成了箭头函数。在Vue的watch中也顺手使用，然而出现了问题。组件中的数据并不能被同步修改。这里的this,并不是Vue的组件thisfunction 写法此时的this才是Vue组件箭头函数会改变this的指向，在Vue组件中，最好不要随便使用箭头函数。特别是watch以及生命周期中。！文档也有相应的提示内容介绍：watch属性介绍watch属性...
【2022-8-24】vue2中使用箭头函数踩坑记录
lookingForw_4585的博客
08-24 692
vue2项目中使用箭头函数踩坑
单选框change事件不生效问题解决
m0_37837382的博客
03-05 1万+
项目中遇到需要用jquery给单选框添加change事件 <div id="operationMethodsGroup" style="float: left; margin-right: 10px;"> <nobr><label style="padding-right:5px;"><input type="radio"
想要调用组件实例的方法-ref
imkaifan的博客
10-13 423
就看： this.renderCityIndex()方法， componentDidMount()，以及在构造函数中创建ref即可 为了获取实例，调取实例上的一些方法 React.createRef() ==注意：==需要在实例上添加ref属性 import React from "react"; import axios from "axios"; import { getCurrentCity } from "../../utils/index"; import { NavBar } from "an.
Vue中使用箭头函数注意事项
np918的博客
08-01 2011
在Vue中watch中使用了箭头函数 props:{ price:{ type:Number, num:0 } }, data(){ return{ priceDefault:0 } } watch:{ price:(val,ind)=>{ console.log(val,ind) } } 死活不起作用。 解决办法 翻了下vue中关于watch的说明文档，末尾...
Vue3学习
ianutt的博客
05-14 908
Vue3学习
Vue3 与 Vue2 官方文档解读
愿你走过半生，归来任是少年。
06-01 1万+
性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，最重要的是把产品做好，让更多人愿意使用，让用户用得更爽，这不也是我们开发者价值与能力的体现吗。
vue element-UI使用el-select时@change不能触发的解决方案（通过el-option @click.native原生方法）
热门推荐
★【World Of Moshow 郑锴】★
10-18 3万+
前言 在下刚入门VUE不久，最近有个项目的页面进行了VUE改造，使用的是 element-UI ，其中有个功能如下，有一下拉选择列表：证书类别，选择其中某个证书类别，自动根据证书类别设置的前缀填写到证书编号的输入框中去。 按道理这是一个onChange事件，也就是el-select的@Change事件可以搞定，但是却多次输出的undefined，最后通过改变思路，使用了el-option的@click.native的原生方法来实现。 源代码+解决方案 源代码+解决方案一起验证，忽略其他细节不看，我们可以发
Vue中如何绑定事件 传递参数
xiaowude_boke的博客
02-23 1444
vue绑定事件 v-on
vue3的自定义事件传参
mfxcyh的博客
06-12 5808
在vue3中使用自定义事件传输数据
Vue之事件绑定
知识应该共享，创造才应收费
02-25 5765
当我们开发完UI界面后，还需要和用户交互，所谓交互也就是用户可以点击界面上的按钮，文字，链接等以及点击键盘上的按钮，我们开发的程序可以做出对应的反应。做出的反应会通过UI界面再反馈给用户，或是对话框，或是跳转到新页面。总之就是响应用户的某个操作。在VUE3中定义事件绑定可以通过在你想注册点击事件的dom元素中，使用@click = "响应操作的JS函数"的方式来实现，方式不唯一，这种方式是一种简写，感兴趣的可以去官网查看不同的写法，这里主要是为了演示VUE3事件绑定
vue之@click绑定的函数，如何实现加不加括号都可执行
yummry的博客
11-10 5819
vue@click 事件原理
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 8275
常规遍历方法 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
vue2知识点：箭头函数和普通函数的this指向问题
刘大猫
06-24 4497
vue2知识点：箭头函数和普通函数的this指向问题
vue 中render普通函数和箭头函数绑定参数和事件的使用方法
weixin_44183178的博客
06-22 4886
vue 中render普通函数和箭头函数绑定参数和事件的使用方法 箭头函数和三元表达式： render: (h, data) => { // console.log(data.row); return data.row.options ? ( <el-select v-model={data.row.ovalue} on-change={val => console.log("选中的是:" + val)}
【Vue2】事件处理(点击、按键)
weixin_45707229的博客
08-19 6618
Vue的按键点击事件@click="函数名" 或者 @click="函数名($event,参数...)"，$event是点击事件的对象。
eslint => Jq事件绑定使用箭头函数问题
hong836717428的博客
12-01 1802
代码结构<div class="box"> box1 </div> <div class="box"> box2 </div> <div class="box"> box3 </div> <div class="box"> box4 </div> 普通写法的script $('.box').on('click',function (){ co
解决Syntax Error: TypeError: Cannot read property ‘styles‘ of undefined
最新发布
03-29
}.bind(this) // 如果是非箭头函数形式需显式绑定 } ``` 这种方法有效解决了因动态调用而导致的目标对象为空的情况[^2]。 --- ##### 5. **调试技巧** 针对难以定位的具体位置，可以借助浏览器开发者工具逐步跟踪...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值