vue 在methods时的this指向问题

最新推荐文章于 2023-08-19 09:10:03 发布
最新推荐文章于 2023-08-19 09:10:03 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： JavaScript篇 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunlando/article/details/111693744
版权
本文探讨了在Vue框架中使用methods时遇到的this指向问题，特别是在结合Element UI使用时可能出现的错误，例如`$message`未定义。解决这个问题的方法是通过保存外部的this引用，确保在方法内部能正确访问组件实例的属性和方法。
摘要由CSDN通过智能技术生成

vue的methods的this指向问题

使用了element ui 的框架

methods : {
   
    checkNum(){
   
      var numb = [1,2,3,4,5,6]
最低0.47元/天 解锁文章
sunlando
关注
专栏目录
Vue中this指向问题
webDevelopSnail的博客
10-31 1447
一、methods中this 1.通常methods属性中的回调函数的this都会指向vue实例 //第一种写法： var vm = new Vue({ el:'app', data:{ name:'', list:[], }, methods:{ handle :function(){ // this.list.push
vue实例内部方法的this指向问题
m0_58399188的博客
08-19 846
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法,要用方法名(){}写,就代表this指向是vue实例,如果使用()=>{}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch和各种回调钩子,因为他们是vvue本身的方法所以只要他们使用普通函数定义this当然指向他
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7390
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
为什么vue里面data和methods可以直接通过this访问?
qq_35469342的博客
03-15 719
其实通过this直接访问到methods里面的函数的原因是：因为methods里的方法通过bind指定了this为new Vue的实例(vm)。其实通过this直接访问到datadata里的属性最终会存储到new Vue的实例（vm）上的_data对象中，访问this.xxx，是访问代理后的。
理解Vue中的methods对象方法里的this指向，并解读源码
qq_41308489的博客
10-18 4518
Vue3的版本 "version": "3.2.20" 阅读区域 618 - 645 解决疑惑 1. methods 对象的 this指向 2. methods 对象的里的 方法 为什么不能用箭头函数 代码 // 当 methods 有方法时 if (methods) { // 对methods对象中的每一个方法遍历 for (const key in methods) { // 取出每一个方法 const methodHandler = (methods
Vue的methods里面的this为什么会指向Vue实例?
天地会珠海分舵
10-25 1100
我们在些vue时经常通过this来获取data中的数据，我们知道data中的数据会通过defineProperty在组件或者vue实例对象中放一份，即数据代理。但是this为什么就指向了组件或者vue实例对象了呢？
vue使用axios时关于this的指向问题详解
11-27
本文主要介绍了关于vue使用axios时this的指向问题，下面话不多说了，来一起看看详细的介绍吧。 1.解决办法 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined，可以使用箭头函数”=>”来解决...
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue中使用axios库发送HTTP请求时，经常会遇到回调函数中this指向问题，特别是当使用axios.get或axios.post方法时，其then或catch回调函数中的this可能并不指向Vue实例。这就导致在回调函数中无法使用Vue实例的data...
vue单页面在methods中使用vue对象的data方法分享
我爱美女S的博客
06-25 1505
vue单页面在methods中使用vue对象的data方法分享
Vue第四天学习
weixin_49088708的博客
05-24 142
1.v-on的基本使用与传参 最基础的用法控制加减 <div id="app"> {{num}} <p @click="add()">++</p> <p @click="sub">--</p> </div> <script src="vue.js"></script> <script type="text/javascript"> var ap
记一个vue中data定义变量的坑
iorn_mangg的博客
05-12 5094
开发项目中无意发现，vue中methods直接写this.a="sss"，没有在data中定义会发现vue不会报错，按道理他会报a is not defined, 然后实际操作这个变量会发现他没有产生vue的响应，就是我修改了这个值，在视图上是不会改变的。 查看文档发现： ...
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
qq_45634989的博客
08-18 6454
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
【VUE】this 作用域问题导致 $message 提示窗、loading 展示隐藏失效
sy12321的博客
02-22 3170
问题 在编写前端功能时发现两个问题，由于要发送post json格式内容，修改了 axios 发送请求的脚本，导致在使用 Message 提示框，和 Loading 加载功能时，作用域出现了问题 第一版代码 export default { data() { return { data_1: '', data_2: '', loading: false } }, methods: { addBtn() { thi
为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！【文末留言送书】
最新发布
u012384510的博客
08-19 899
大家好，我是若川。我倾力持续组织了两年多源码共读，感兴趣的可以加我微信lxchuan12参与。之前送过N次书，可以点此查看回馈粉丝，现在又和清华大学出版社合作再次争取了几本书，具体送书规则看文末。写相对很难的源码，耗费了自己的时间和精力，也没收获多少阅读点赞，其实是一件挺受打击的事情。从阅读量和读者受益方面来看，不能促进作者持续输出文章。所以转变思路，写一些相对通俗易懂的文章。其实源码也不是想...
Vue + Element 中 this.$message 失效问题解决方法
热门推荐
hongyuancao的博客
03-02 5万+
⭐️个人博客：www.caohongyuan.cn，更多分享，欢迎浏览！⭐️ Vue的Element确实给开发者提供了很大的便捷，比如消息提示中的：this.$message 函数就非常好用。但是在某些情况下是失效的，比如如下代码所示： onSubmit: function () { if (this.formInline.title === '') { // 这里可...
Element按需加载之坑 ：为什么this.$message不起作用了？
peade的博客
09-02 1万+
为什么this.$message不起作用了？ 今天在使用elementUI的时候，准备使用this.$message来做个消息提示。顺溜地把代码写完了，一运行，发现代码报错了， this.$message is not function 看了看，我的代码 ... import {Message} from 'element-ui' ... Vue.use(Message) 这么写，好像没错。 ...
微人事项目之消息提示组件报错this.$message is not a function
tqq的博客
08-26 2906
今天在做微人事项目的时候遇到这个错误，我也不清楚为什么，没有仔细的审查，百度了一下之后按照上面说的做，成功了，先记录下来吧。 原因： 在单独按需引入element组件时，message组件需要挂载到Vue全局对象上，而不是用Vue.use(Message)，这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的，还有confirm组件。 在main.js中添加 1 import { Message } from "element-ui"; 2 Vue.use(Message)
vue中的this指向问题
JINGinC的博客
10-23 1万+
最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向 看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。 但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。 在Vue的官方文档是这么解释的： methods 将被混入到 Vue ...
vue中函数this指向问题
06-03
在 Vue 中，函数中的 this 关键字默认指向当前组件实例。但是，当函数被作为回调函数传递时，this 的指向可能会发生变化。为了解决这个问题，可以使用箭头函数或者在函数内部使用 bind 方法来绑定 this 的值。例如：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值