关于Vue的组件属性this不存在问题

最新推荐文章于 2024-05-29 13:31:41 发布
原创 最新推荐文章于 2024-05-29 13:31:41 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #箭头函数

本文探讨了在Vue.js中使用箭头函数导致mounted钩子内的this为undefined的问题。介绍了箭头函数的作用域特性及其与Vue实例之间的冲突，并提供了解决方案。

问题来源

今天写代码，发现我的mounted方法里面的this全部一致是undefined，很奇怪，一致再找问题然后我找到问题了。

原因

原因是我用mounted方法的时候一致是采用的箭头函数而箭头函数的话是和父作用域相关的，所以不会绑定到实例。
脑袋之前一致没转到这个问题上来坑死我了。

解决方案

在实例的属性里面坚决不要使用箭头函数！！！！！！！！！！！
困死爹了

vue中组件的props属性（详）
蜗牛~~
10-28 18万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
关于vue组件事件属性穿透详解
10-16
本文将详细讲解Vue组件中的事件属性穿透，以及如何有效地利用`$attrs`和`$listeners`来实现这一功能。 首先，我们要了解什么是事件属性穿透。在Vue中，当父组件向子组件传递属性时，有时我们希望子组件能够触发父...
Vue.js mounted 未执行
热门推荐
我不是一个假前端的博客
07-21 1万+
mounted 是在页面html部署完成后开始执行 但是今天使用，发现mounted 一直无法调用，这里分享一下解决办法： 首先；我用的vue是在百度 http://apps.bdimg.com/libs/vue/1.0.8/vue.js 上的，坑就在这里。。。。。。 mounted:function () { this.$nextTick(function () { ...
mounted中没法用this吗_vue中的$nextTick()与$set()
weixin_39975055的博客
01-26 1912
记录下vue中有关DOM的两个方法$nextTick()与$set()，因为vue是数据驱动视图(MVVM)模式，不需要手动操作DOM，所以有关DOM的方法不常用，下面记录一下这两种方法的使用场景1.this.$nextTick()this.$nextTick()是在下次DOM更新循环结束之后执行延迟回调场景一：假设我们改变了某个DOM内部的文本，此时用this.$refs打印DOM...
解决前端开发过程中this绑定丢失的问题
weixin_43263355的博客
08-04 997
问题提出 在前端开发过程中，如果函数嵌套过多，非常容易出现this的上下文隐式丢失的问题。例如下面的代码，代码中的html部分请见附录。 <script> export default { name: "listapp", data() { return { studentList: [] }; }, mounted: function() { this.$axios .get("../js
类型“Vue | Element | (Vue | Element)[]”上不存在属性“resetFields”。 类型“Vue”上不存在属性“resetFields”。ts(2339) ts中连
厚积薄发.
04-06 788
类型“Vue | Element | (Vue | Element)[]”上不存在属性“resetFields”。类型“Vue”上不存在属性“resetFields”。ts中连续的链式调用会有类型校验错误。
VUE在mounted中this为undefined解决方案
最新发布
weixin_61339604的博客
05-29 785
this为undefined
解决vue组件props传值对象获取不到的问题
10-16
总结而言，解决Vue组件通过props传递对象，子组件无法获取对象内部属性的问题，关键在于要理解Vue的响应式原理，并使用正确的数据更新和监听方法。通过在父组件中使用`watch`来监控数据变化，并在子组件中通过`watch...
在Vue中获取组件声明时的name属性方法
10-18
console.error(`${this.$options.name} 组件中，以下图片链接不存在，或无法打开：${url}`); // 可以在这里添加一个上报的Ajax请求 // ... do some code } ``` 这种方法不仅简化了代码，还使得错误处理更加灵活...
类型“{}”上不存在属性“XXX”
weixin_43653606的博客
03-07 716
类型{}上面不存在XX属性
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
01-18
今天在vue-cli脚手架搭建的项目中使用axios时，遇到无法解析this.$route的报错信息，最后发现是作用域的问题。 1.解决方法：使用 => 原代码： axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为： axios.get('/user', { params: { ID: 12345
vue 必须使用refs获取元素吗_vue使用this.$refs.xx在mounted中获取DOM元素为undefined
weixin_36352910的博客
01-17 2355
this.$refs.xxx为undefined的几种情况：1.在created里钩子函数中调用原因：created()在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。2.数...
vue 中this指向问题
minfight的博客
06-02 380
普通函数指向vue的实例对象 箭头函数指向window 注意子件中的this
JavaScript(四)：DOM、BOM、事件处理、对象与原型
算云烟
12-07 911
一、DOM 1. DOM简介 ​ Document Object Model 文档对象模型 ​ 浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树 HTML文档和DOM树是一一对应的关系 当DOM树被改变时，与之对应的HTML文档也会随之改变 当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作 DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件 树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档 2. 查询操作
vue中在mounted中v _this=this作用及案例解析
cmhahaha的博客
04-20 1135
v_this只是一个变量名，this代表父函数，如果在子函数还用this，this的指向就变成子函数了，v_this就是用来存储指向的。 普通函数中的this表示调用此函数时的对象，箭头函数里面的this会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止 箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind 普通函数的this指向调用它的那个对象 举个例子 在开发中遇到了这样的问题，需要点击
vue中this指向问题
Canace_Xyxjjcaw的博客
02-10 1079
vue中created、mounted中的this指向vue实例，但是回调中的指向不是vue实例。解决办法： 定义一个变量为_this，将指向vue的this赋值给_this。
初学者了解mounted和this.$nextTick()的区别，在哪种情况下使用；
qq_19547853的博客
06-17 2912
其实看下图，就应该很情况的了解两个命令在vue中的执行阶段，就可以知道该如何使用了 两者的使用区别：mounted适合在初始化渲染完成后数据和页面没有发生变化的情况下使用； **$nextTick()**适合初始化完成后，我们对数据进行操作并且页面发生了变化时使用，且可以多次使用； ...
vue组件中的this指向问题
yangwq的博客
01-22 3151
【问题描述】返回顶部组件里，用到数据操作。通过方法里改动this数据，但发现直接使用失效 检查后发现this指向window，而非vue实例，所以无法操作数据。 mounted() { window.onscroll=function(){ if(document.documentElement.scrollTop>100) { this...
解决Vue异步请求中this为undefined以及mounted中获取不到data的数据的问题
Ekertree的博客
07-23 6059
获取路由参数的两种方式this.$route.params.id用于获取如下形式的参数路径/idthis.$route.query.xxx用于获取如下形式的参数路径?xxx=…注意在异步请求中的this不是注意data中的值由created中的异步请求获取并赋值的，mounted中要进行引用的话，可能异步请求中还未返回结果就被引用了。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值