小白问问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']();
}
}
思路如上，具体代码如下：
                            

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指向。