小白问问vue中this的问题求老司机指点！

Question

我写了一个n次点击后才触发的方法函数，然后想在vue中使用，但是发现about中this是个{}要怎么样才能正确的拿到this呢，搜了半天没搞懂...
这是按钮
这是点击的方法
about:afterNClick(()=>{
this.$alert('test')
})
这是n次点击后才触发的方法函数
//n次点击后触发
functionafterNClick(fn,times=5){
letcount=0,timer=null;
return()=>{
count++;
timer&&clearTimeout(timer);
if(count>=times){
fn&&fn();
returncount=0;
}
timer=setTimeout(()=>{
count=0;
},500)
}
}

Answer 1

你的代码，this丢掉；关键的环节是这行代码：about:afterNClick()//上面这行代码，你需要知道afterNClick()这个执行，是在上面时候发生的;//他的执行时间是，newVue()的时候，也就是发生在组件的`beforeCreate`之前，所以怎么改代码都不会把this指导当前组件实例，因此需要修改，执行的时机；修改到mounted里面去mounted(){this['funName']=afterNClick(()=>{/**这个时候this，一定是当前组件**/})}当前这样写的问题是，没办法直接在template里面进行使用了，因此需要在套一个方法methods:{click:()=>{this.['funName']();}}思路如上，具体代码如下：点击functionclickTime(times){times=times||5;letcount=0;returnfunctioninner(handler){count++;console.log('当前点击次数',count)if(count===times){if(typeofhandler==='function'){handler();}count=0;//初始化count，每5次点击一次}}}exportdefault{name:'app',methods:{clickHandler(){this.clickHandler(()=>{//具体业务实现console.log(this);//这里的this-->当前vue组件});}},mounted(){this['clickHandler']=clickTime()}}

Answer 2

about:function(){afterNClick(()=>{console.log(this);this.$alert('test');});}//或者about:function(){letts=this;afterNClick(()=>{console.log(ts);ts.$alert('test');});}另外，很好奇。你的afterNClick是vue实例的其中一个method吗？如果这个方法从需求上讲就应该隶属于该实例，请尽量写入该实例的methods里。vue中，this默认指向当前vue实例。使用箭头函数并不会改变this指向。