vue定义组件this指向

于 2023-02-17 11:19:09 发布
阅读量151 收藏
点赞数
分类专栏： 前端 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40765395/article/details/129081777
版权

定义某个组件的this
在这里插入图片描述
其他组件调用的定义好的组件，就能调用该定义好的组件属性和方法
在这里插入图片描述

global相当于window

这种定义方便快捷，能省vuex，bus等的这种写法（小调用的简便情况下）。

vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
Vue中this的指向问题
Rhine
01-07 2万+
最近一直在做毕业设计，学习了Vue用来写了很多的前端代码，不得不说js对我这个“Java前端程序员”有些太不友好，时不时都能遇到一些坑，this就是其中之一。
(vue.js)vue中引用了别的组件 ，如何使this指向Vue对象
weixin_30241919的博客
11-07 737
Vue中引用了别的组件 ，如何使this指向Vue对象 今天学习Vue组件传值,通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的组件, this指向发生改变,所以通过以下办法解决。 var _this = {} export default { data(){ ret...
Vue的全局变量的使用,包括创建文件,引入,使用方法(新手向)
wockky的博客
06-07 1270
  因为手机上的app没有携带浏览器,所以程序中用localstroge.setitem进行本地存储的变量都会失效,当手机上的app不能用localstroge.setItem时又想有全局可用变量,这个时候就可以引入全局变量 ** 1.创建全局变量的js文件 ** 这里的文件名可以随意取 2.在src目录下的main.js文件中注册全局变量 Vue.prototype.属性名 = 引入文件时自己起的名 在vue页面中使用时就直接用this.属性名可以直接调用我们在全局变量中定义的值 3.
Vue中的this
z1216108894的博客
11-22 1万+
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法。 要用方法名(){}写,就代表this指向是vue实例,如果使用()=>{}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即th
vue定义全局this
小馒头味的博客
12-02 3599
vue定义全局this //全局this,定义在初始化vue方法外,与import方法同级 let _this; //初始化加载项 created() { _this = this; },
vue组件之this指向问题
weixin_30235225的博客
04-12 1006
【问题描述】 返回顶部组件里，用到数据操作。通过方法里改动this数据，但发现直接使用失效 mounted() { window.onscroll=function(){ if(document.documentElement.scrollTop>100) { thi...
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue组件中使用箭头函数定义方法时，其this指向不会改变，总是指向定义时的上下文，这使得在箭头函数中可以安全地使用组件的this。 当使用axios发起HTTP请求时，then或catch方法接受一个回调函数，该函数将在...
在Vue中获取组件声明时的name属性方法
10-18
在上述示例中，`catchError`函数接收一个错误描述作为参数，但通过调用`catchError.call(this, 'errorDescription')`，我们可以确保`this`上下文指向当前的组件实例，从而能够访问到`$options`。这样，我们就可以在...
详解vue中的computed的this指向问题
10-17
- **使用getter方法**：Vue.js还允许在`computed`中定义getter方法，这样`this`也会正确指向Vue实例： ```javascript computed: { allFigure: { get() { console.log(this.value); // `this`指向Vue实例 } }...
在Vue中使用this.$store或者是$route一直报错的解决
10-16
例如，如果在组件的方法中使用箭头函数，那么其中的this将不会指向当前Vue实例，因此无法访问到this.$store或this.$route。 为解决此类问题，可以采取如下措施： - 在方法中直接使用普通函数而非箭头函数； - ...
Vue的this
茅坤宝骏氹的博客
07-16 1122
一、vue编译模块 （1）模块域中导出对象域 export default { data() { return { msg: '' }; } }; A.function定义函数 I、模块导出对象的各关键字的属性值 如data的值 export default { props:['propA'}, ...
vue方法内的方法使用this的问题
铛哩格铛的博客
11-02 1万+
locapos(){//定位方法 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude,
Vue里this指向
热门推荐
cc蒲公英的博客
06-30 3万+
一、普通函数中的this 这是vue文档里的原话：All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.意思是：在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vu...
vue项目中this指向
cofecode的博客
08-02 8145
实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。发送请求前，this.phone还有值，发送请求后this.phone的值就有问题了。纠其原因是es5 的写法，this的值发生了变化。指向undefined。而这里我们的this 需要指向vue实例这里需要再继续补充箭头函数
javascript及vue中 this全面指南
welcome to daijiguo's blog
10-10 9175
开发环境：javascript 情况一：对象下的函数中 //test.js var out = { function inner(){ this } } 此时函数中的this表示out对象。 情况二：函数中 //test.js function inner(){ this } 此时函数中的this表示全局对象window 开发环境：Vue 情况一：vue组件中 new Vue({...
vue中this的指向
atu1111的博客
07-25 1万+
vue中this的指向 1.在Vue所有的生命周期钩子方法   比如在mounted里使用this，this指向调用它的Vue实例，如下列子： 2.vue组件生命周期钩子方法里面还有方法使用this   在函数内部使用this时，this会指向window，而非vue实例。所以除了vue组件自身方法外，在别的地方调用this时， 首先需要在最外部，设置一个变量，将其绑定上vue实例。 3.vue普通方法中使用this   this指向调用它的Vue实例 4.vue箭头方法中使用this   箭头函数没
【面试点】：vue中关于this的详解
jieweiwujie的博客
09-25 1540
<template> <div class="home"> 1.window的匿名函数 如settimeout（没有箭头）指向是window；函数里面调用要用that变量接一下，才能拿到vue实例，不然指向window 2.js函数 如foreach ，filter（没有箭头）没有指向，所有函数里面调用，直接指向vue，不用做变量替换 3.箭头函数，没有具体的this指向，在它内部使用，由宿主对象决定 3.1匿名函数使用箭头函数写，指向方法的.
vue addeventlistener this指向
最新发布
12-26
### Vue 中 `addEventListener` 的 `this` 指向问题 在 Vue 组件的方法中使用原生 JavaScript 的事件监听器 (`addEventListener`) 时，可能会遇到 `this` 不是指向当前 Vue 实例的情况。这是因为当回调函数被触发时，默认情况下其上下文可能不是 Vue 实例。 为了确保 `this` 正确指向 Vue 实例，在定义事件处理程序时可以采用箭头函数来自动绑定父级作用域中的 `this`[^1]： ```javascript mounted() { const element = document.getElementById('myElement'); // 使用箭头函数保持 this 指向 Vue 实例 element.addEventListener('click', () => { console.log(this.message); // 访问 Vue 数据属性 message }); } ``` 另一种常见做法是在创建组件实例之前保存对 `this` 的引用，并将其传递给事件处理器作为参数之一[^2]： ```javascript data() { return { myMessage: "Hello", self: null, }; }, created() { this.self = this; }, methods: { handleClick(event) { console.log(this.self.myMessage); } }, mounted() { const element = document.getElementById('myElement'); element.addEventListener('click', this.handleClick.bind(this)); } ``` 此外还可以利用 Vue 提供的 `$refs` 来获取 DOM 节点并附加事件监听器，这样也可以简化操作并且更好地遵循 Vue 的编程范式[^3]: ```html <template> <div ref="target"></div> </template> <script> export default { mounted() { let targetElm = this.$refs.target; targetElm.addEventListener('click', event => { console.log(this.someDataProperty); // 这里的 this 是指 Vue 实例 }) }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值