关于vue3中的this问题

最新推荐文章于 2024-07-18 16:22:57 发布
最新推荐文章于 2024-07-18 16:22:57 发布
阅读量4.5k 收藏 2
点赞数
文章标签： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bule_BUFF/article/details/120490202
版权

项目用了vue3，以为只用proxy代替this才能用。这个例子就用到了直接用到了this，我之前一直以为不能用this。。。
需求是这样的，鼠标移动到重置按钮上改变颜色，移走就恢复。
在这里插入图片描述
给按钮绑定鼠标事件和动态类名
在这里插入图片描述
然后在methods中定义这两个事件方法
在这里插入图片描述
用this可以直接获取到这个元素，然后改变他的showTitleBtn。
之前想要state.showTitleBtn = false；这种形式，结果报错说sate未定义。就只能用this了。
然后这是打印出来的this在这里插入图片描述

蓝胖子~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
详解vue中的computed的this指向问题
10-17
3. **解决`this`指向问题** - **使用非箭头函数**：最直接的解决方案是避免在`computed`中使用箭头函数，确保`this`能够正确指向Vue组件实例。 - **使用getter方法**：Vue.js还允许在`computed`中定义getter方法，...
Vue3和Vue2的部分用法差异
hzj1369的博客
09-21 1395
Vue3和Vue2常用功能的用法差异
Vue中this指向问题
胡云峰的博客
10-27 484
在Vue由Vue管理的函数,尽量使用普通函数定义。不被Vue管理的函数，尽量使用箭头函数定义。这样保证this总是指向Vue实例，可以调用到Vue数据。
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
RenGJ010617的博客
05-25 5562
onMounted作为vue3中最常用的钩子函数之一，能够灵活、随心应手的使用是每个Vue开发者的必修课，同时根据其不同写法的特性，来选择最合适最有利于维护的写法。
vue3还用this吗？getCurrentInstance获取当前组件实例
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-24 3599
在Vue3中，我们发现this是undefined，那我们真的没法使用this了吗？vu3给我们提供了一个getCurrentInstance函数： 用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。
vue3 this问题
2302_76678159的博客
08-05 889
为什么vue3没有this：在vue2中使用options api时，可以使用this,但是当我们使用vue3中的composition api时，我们在setup中却无法使用this。vue3中可以使用getCurrentInstance函数获取this实例。
vue中的this指向问题
热门推荐
JINGinC的博客
10-23 1万+
最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向 看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。 但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。 在Vue的官方文档是这么解释的： methods 将被混入到 Vue ...
Vue3中如何使用this
happygirl0917的博客
09-07 1万+
在v3中，使用setup()来代替了以前data、methods函数等。因为，setup执行是在created之前。所以，没有this。但是又想使用$parent,$refs等方法 import { getCurrentInstance, ComponentInternalInstance } from 'vue' setup() { // as ComponetInternalInstance表示类型断言，ts时使用。否则报错，proxy为null const { proxy } =
为什么vue3内不使用this
小码哥AI、互联网副业项目
02-22 1084
为什么vue3内不使用this
vue3为什么不能使用this
m0_59508634的博客
03-24 229
的使用受到了限制，主要是因为在 Vue 3 中引入了 Composition API，它提供了一种更灵活、更可组合的方式来组织和管理组件的逻辑。和 Composition API 的其他功能，你可以在 Vue 3 中编写更加清晰和可维护的代码。的使用是为了推广 Composition API，使组件逻辑更加灵活和可组合。函数在组件实例创建之前被调用，并且它是响应式系统的入口点，因此。函数中直接使用组件实例，确保响应式系统的正确性和一致性。关键字是不可用的，因为它不是组件实例的上下文。在 Vue 3 中，
vue开发中遇到的问题总结
10-15
在Vue.js开发过程中，开发者经常会遇到各种挑战和问题。本文将总结一些常见的Vue开发问题及其解决方案，帮助读者理解和解决这些问题。 ### 1. 子组件修改父组件的prop 问题描述：Vue警告提示"Avoid mutating a ...
vue使用axios时关于this的指向问题详解
11-27
本文主要介绍了关于vue使用axios时this的指向问题，下面话不多说了，来一起看看详细的介绍吧。 1.解决办法 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined，可以使用箭头函数”=>”来解决...
vue3.x中使用cesium，vue3.x+Cesium
05-04
以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置...
Vue3.0中this的替代方法
weixin_44590591的博客
01-25 1万+
Vue3.0中this的替代方法 在vue3中，新的组合式API中没有this，我们可以通过以下方法替代this setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，所以我们无法使用 this 方法一 getCurrentInstance() 方法，获取当前组件的实例，通过 ctx 或 proxy 属性获得当前上下文，从而就能在setup中使用router和vuex import { getCurrentInstance } from "vue";
Vue3的setup函数中为什么没有this
weixin_47450807的博客
02-11 9281
我们在vue2中使用options api时，可以使用this,但是当我们使用vue3中的composition api时，我们在setup中却无法使用this。 原因是：我们在options api中对其中的一些属性进行绑定，但是在composition api中的setup函数的执行并没有绑定实例对象，下面我们看一下源码。 上面截图为options api中的methods选项和生命周期函数的部分源码，我们可以看到当执行函数时，会使用bind进行绑定。 下面我们将从composition api的se
vue3获取this对象
qq_60976312的博客
11-28 8992
vue3获取this对象
在Vue3的setup中如何使用this
qq_37485170的博客
04-20 3638
但是Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。可以看到，2者有所区别。ctx是普通对象，proxy是Proxy对象。2、使用：由vue提供，官方文档现已找不到此api，可寻找其他替代方案，可能也不推荐使用。中使用this， Vue为我们提供了getCurrentInstance（）方法，这个方法返回了ctx和proxy。1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。
使用 XPath 定位 HTML 中的 img 标签
最新发布
Z_suger7的博客
07-18 776
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值