小白问问vue中this的问题

toesbieya
  • 1.5k

我写了一个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)
    }
}
回复
阅读 813
3 个回答
你的代码,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>
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 指向。

不要使用箭头函数。

宣传栏