小白问问vue中this的问题

Question

我写了一个n次点击后才触发的方法函数，然后想在vue中使用，但是发现about中this是个{}
要怎么样才能正确的拿到this呢，搜了半天没搞懂...

这是按钮

<button @click="about"></button>

这是点击的方法

about:afterNClick(()=>{
                this.$alert('test')
            })

这是n次点击后才触发的方法函数

//n次点击后触发
function afterNClick(fn,times=5) {
    let count=0,timer=null;
    return ()=>{
        count++;
        timer && clearTimeout(timer);
        if (count>=times){
            fn&&fn();
            return count=0;
        }
        timer = setTimeout(() => {
            count=0;
        }, 500)
    }
}

Answer 1

你的代码，this丢掉；关键的环节是这行代码：

about:afterNClick()
// 上面这行代码，你需要知道 afterNClick() 这个执行，是在上面时候发生的;
// 他的执行时间是，new Vue() 的时候，也就是发生在组件的 ` beforeCreate ` 之前，所以怎么改代码都不会把this指导当前组件实例，

因此需要修改，执行的时机；修改到mounted里面去

mounted(){
  this['funName'] = afterNClick(()=>{  /** 这个时候this，一定是当前组件 **/  })
}

当前这样写的问题是，没办法直接在 template 里面进行使用了，因此需要 在套一个方法

methods:{
  click:()=>{
    this.['funName']();
  }
}

思路如上，具体代码如下：

<template>
  <div id="app">
    <button @click="clickHandler">点击</button>
  </div>
</template>
<script>
function clickTime(times){
  times = times ||5;
  let count = 0;
  return function inner(handler){
    count++;
    console.log('当前点击次数',count)
    if(count===times){
      if(typeof handler === 'function'){
        handler();
      }
      count=0;// 初始化count，每5次点击一次
    }
  }
}
export default {
  name: 'app',
  methods:{
    clickHandler(){
      this.clickHandler(()=>{
        // 具体业务实现
        console.log(this);// 这里的this-->当前vue 组件
      });
    }
  },
  mounted(){
    this['clickHandler']= clickTime()
  }
}
</script>

Answer 2

about:function(){
    afterNClick(() => {
        console.log(this);
        this.$alert('test');
    });
}

// 或者
about:function(){
    let ts = this;
    afterNClick(() => {
        console.log(ts);
        ts.$alert('test');
    });
}

另外，很好奇。你的 afterNClick 是 vue 实例的其中一个 method 吗？如果这个方法从需求上讲就应该隶属于该实例，请尽量写入该实例的 methods 里。

vue 中，this 默认指向当前 vue 实例。使用箭头函数并不会改变 this 指向。

Answer 3

不要使用箭头函数。