vue内setTimeout内this引用的方法提示未定义

最新推荐文章于 2023-04-07 14:56:58 发布

j_w119

最新推荐文章于 2023-04-07 14:56:58 发布

阅读量676

点赞数

分类专栏： vue前端文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/xiongmi_Lin/article/details/105671180

版权

vue前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在Vue.js中，由于setTimeout函数在全局环境下运行，导致this指向window而非Vue实例。为解决这个问题，可以将this值存储在变量如&_this中，或者使用箭头函数来保持this的正确引用，从而访问到message等数据属性。

摘要由CSDN通过智能技术生成

这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。，在vue中使用setTimeout在function中直接使用this无效。正确的使用方法是：

1.在外部给this定义暂存

  data(){
  	return{
  		message:"这是一条消息"
  	}
  },
  methods: {
  	func(){
  		var _this = this;    //定义_this暂存this
        setTimeout(function(){
          console.log(_this.message);
        },"500");
  	}
  }

2.使用箭头函数

  data(){
  	return{
  		message:"这是一条消息"
  	}
  },
  methods: {
  	func(){
        setTimeout(()=>{
          console.log(this.message);
        },"500");
  	},
  }