vue中自定义方法this指向问题

最新推荐文章于 2022-12-20 11:22:24 发布
最新推荐文章于 2022-12-20 11:22:24 发布
阅读量801 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Stead_Fast/article/details/119350226
版权
本文详细解释了Vue中自定义方法内部this的指向规律：在普通函数中this指向Vue实例，在不受Vue管理的函数中推荐使用箭头函数来确保this指向正确。

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

自定义方法（普通函数）内部的this指向vue实例（vm）。

不建议用箭头函数，因为箭头函数this本身没有指向，会去外边找，找到的this是window对象，而不是vue实例。

不被vue所管理的函数（定时器回调，ajax回调，Promise回调），最好写成箭头函数，这样this指向才是vm或组件实例对象。

vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
Vue学习：组件自定义事件（this指向）（原生事件）
weixin_47295886的博客
02-25 341
this是vc了箭头函数没有自己的this ,所以指向了app。this是student组件实例，谁触发 this是谁。这种写法变成了自定义事件 需要一个修饰符native。前面都是给组件绑定自定义事件，现在是原生事件。APP收到信息，需要在页面展示。但是这里有一个注意事项。
Vue中在组件中单独使用this
青春木鱼的博客
12-20 1211
全局注册——Vue.prototype、Vue.component、Vue.ues；局部注册——components：{App，}
Vue之自定义指令（对象式）
qq_40844663的博客
03-30 551
<div id="root"> <button @click="n++">点击进行自增</button> <input type="text" v-fbind:value="n"> <!-- 自定义的一个fbind指令名 ，注意必须是小写--> </div> <script src="./vue.js"></script> <scrip
类中定义的方法的this的指向问题
桃子的博客
08-17 202
类方法this指向
Vue全局定义方法
米斯特曹
08-08 2248
简单介绍一下Vue全局定义方法以及如何使用！ 1、首先在src目录下新建一个commonjs（用来写多个js文件） 2、文件内部安排上封装好的代码 3、最后在main.js引入 并且挂载到prototype原型上 然后就可以正常在项目中使用了！ 除了在组件上直接使用以外，还可以在其他函数中直接使用，Vue的router、router、router、emit等等就是这么来的； -------...
vue项目中在外部js文件中直接调用vue实例的方法比如说this
10-17
然而，在一些特定的情况下，比如在外部引入的JavaScript文件中，this可能并不指向Vue实例，而是指向全局对象window，这并不是我们想要的结果。那么，如何在外部JavaScript文件中正确调用Vue实例的方法呢？本文将详细...
详解在Vue中通过自定义指令获取dom元素
12-08
总结来说，Vue自定义指令为我们提供了一种灵活的方式来操作DOM，即使在不使用构建工具的小型项目中，也能避免不必要的组件化。通过结合自定义指令和Vue实例的`data`，我们可以安全地存储和访问DOM元素，从而在需要的...
vue.js 获取当前自定义属性值
10-19
在Vue.js中，我们通常使用Vue的指令或方法来获取这些自定义属性的值。本文将详细介绍如何在Vue.js中获取自定义属性值。 首先，需要明确的是，在HTML中，所有以“data-”为前缀的属性都会被自动存储在一个名为`...
解决vue.js this.$router.push无效的问题
10-18
- 如果问题可能由Promise的异步特性引起，尝试将this.$router.push放在Vue实例的生命周期钩子函数中，如mounted()，以确保this指向正确。 - 使用浏览器的开发者工具来调试，查看this.$router.push被调用时this的确切...
Vue实例的属性和方法
打杂人
04-17 1万+
一、Vue之实例属性 Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的数据属性区分 组件树 $parent：用来访问组件实例的父实例 $root: 用来访问当前组件树的根实例 $children:用来访问当前组件实例的直接子组件实例 $refs:用来访问v-ref指令的子组件 DOM访问 $el：用来挂载当前组件实例的dom元素 $els...
Vue 自定义方法的两种形式(声明式定义、表达式定义)
daquan 的博客
05-07 1万+
引言 作为一个一个构建用户界面的框架，Vue 在定义其内置方法时有其特有的书写方式，这与典型的JavaScript书写方法有相通之处，但有其特点 JavaScript函数 典型的JavaScript定义函数方法有两种形式，一种为声明式定义，如下所示： function functionName(value1...){ //函数体 } 还有一种形式，为表达式定义，如下所示： va...
在Vue项目中定义全局方法
JQ___的博客
06-05 1204
原因: 有時候我們在vue項目的不同組件中要执行同一個方法获取一些想要的数据,如果在每个组件中都写同一个方法就会增加每个组件中的代码量,所以可以定义全局的方法,在不同的组件中调用 1.方法一 : 在入口文件(main.js)中,直接Vue.prototype上面定义,先看一下代码 Vue.prototype.sayWhat= function(something){ console.log(`say:${something}`) } 原理: 因为Vue实质上就是一个对象。大多数对象都会存在原型对象
vue 实例的属性和方法
Eling
02-27 1383
vue实例的属性和方法 1.属性 vm.$el ===&amp;amp;amp;gt; 用于获取vue实例内el指定的dom对象 vm.$data ===&amp;amp;amp;gt; 用于获取vue实例内的数据对象 data vm.$options ===&amp;amp;amp;gt; 用于获取vue实例内的自定义属性或方法 vm.$options方法实例： var vm = new Vue({ el: &amp;amp;quo
【Vue学习总结】7.Vue定义方法、操作数据以及事件对象
程序猿之洞
08-16 3204
接上篇《6.Vue双向数据绑定和ref属性操作原生DOM》 上一篇我们主要讲解了Vue及双向数据绑定和Vue事件，以及Vue中的ref获取dom节点的操作，本篇我们来详细的介绍Vue事件，以及如何定义、执行方法，如何获取和改变数据，执行方法传值以及事件对象的操作。 本系列博文使用的Vue版本：2.6.11 一、执行事件的方法 这个我们在上一篇讲到，执行Vue的事件，在标签体中添加“v-on:click”属性，指定一个需要触发的方法： <button v-on:click="run1()">
Vue入门-Vue实例
shenzhen_zsw的专栏
06-12 406
Vue入门-Vue实例4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this 4.Vue实例 4.1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象，并且在对象中...
vue前端面试刷题练习1 峰峰博客
热门推荐
程序员峰峰
03-15 1万+
一、选择题 1．在Vue实例中可以定义方法的是（ B ）选项。 A. el B. methods C. data D. computed 2．下列指令中，不能实现条件判断的是（ D ）。 A. v-if B. v-else C. v-show D. v-bind 3．下列代码的运行结果为（ B ） <div id="example"> <p>{{len}}</p> </div> <script type="text
Vue01-创建Vue实例以及各选项含义
qq_46801776的博客
08-28 3123
1、创建Vue实例 Vue实例：通过new关键字实例化Vue（{}）构造函数 <script> var vm = new Vue({ //选项 }); Vue实例配置对象： data：Vue实例数据对象。 methods：定义Vue示例中的方法。 components：定义子组件。 computed：计算属性。 filters：过滤器。 el：唯一根元素。 watch：监听数据变化。 2、el唯一根标签 在创建Vue实例时，el表示唯一根标签，通过指定class或者id选择器可以用来将
vue2的this指向
最新发布
01-24
### Vue2 中 `this` 关键字的指向规则 #### 函数调用中的 `this` 在 JavaScript 的普通函数中，当函数被直接调用时，在非严格模式下 `this` 指向全局对象（通常是浏览器环境下的 `window` 对象），而在严格模式下 `this` 是 `undefined`[^2]。 ```javascript function testThis() { "use strict"; return this; } console.log(testThis()); // 输出: undefined ``` 然而，在 Vue 组件的方法、生命周期钩子和其他特定上下文中，`this` 始终指向当前组件实例。这是因为 Vue.js 明确绑定了这些方法内的 `this` 到对应的 Vue 实例上。 #### 方法和生命周期钩子里的 `this` 对于像 `created()` 或者其他自定义方法来说，只要它们是在 Vue 组件选项内声明的，则其中使用的 `this` 将自动绑定到该组件实例： ```typescript export default class GoodsClassify extends Vue { private created() { console.log(this); // 正常情况下会打印出 VueComponent 实例 } } ``` 但是需要注意的是，如果尝试通过 HTML 属性事件处理器来触发某个方法的话，可能会遇到 `this` 变成 `null` 或者未预期的对象的情况。这通常发生在使用箭头函数作为回调的情况下，因为箭头函数不会创建自己的 `this`，而是继承外部作用域的 `this` 值[^1]。 为了确保正确的 `this` 指向，可以采用如下几种解决方案之一： - 使用 `.bind(this)` 来显式地设置 `checkChange` 方法里的 `this`； - 改写为类成员表达式的箭头函数形式； ```typescript // 方案一：使用 bind private treeOptions = { data: [], defaultProps: { children: 'children', label: 'name' }, checkChange: function () { console.log(this); }.bind(this), }; // 方案二：改写为箭头函数 private treeOptions = { data: [], defaultProps: { children: 'children', label: 'name' }, checkChange: () => { console.log(this); }, }; ``` 另外值得注意的一点是，在模板语法中使用过滤器时，如 `{{ item.name | demoFn }}` ，这里的 `demoFn` 并不是作为一个独立函数执行，而是一个特殊的处理过程的一部分，因此其内部的 `this` 不会被影响，并且应该按照正常的 Vue 组件逻辑工作[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值