首頁(yè) 猿問(wèn) ...

小白問(wèn)問(wèn)vue中this的問(wèn)題求老司機(jī)指點(diǎn)！

JavaScript

SMILET 2019-08-24 22:22:27

我寫(xiě)了一個(gè)n次點(diǎn)擊后才觸發(fā)的方法函數(shù)，然后想在vue中使用，但是發(fā)現(xiàn)about中this是個(gè){}要怎么樣才能正確的拿到this呢，搜了半天沒(méi)搞懂...這是按鈕這是點(diǎn)擊的方法about:afterNClick(()=>{this.$alert('test')})這是n次點(diǎn)擊后才觸發(fā)的方法函數(shù)//n次點(diǎn)擊后觸發(fā)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)}}

查看完整描述

2 回答

胡說(shuō)叔叔

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊

你的代碼，this丟掉；關(guān)鍵的環(huán)節(jié)是這行代碼：about:afterNClick()//上面這行代碼，你需要知道afterNClick()這個(gè)執(zhí)行，是在上面時(shí)候發(fā)生的;//他的執(zhí)行時(shí)間是，newVue()的時(shí)候，也就是發(fā)生在組件的`beforeCreate`之前，所以怎么改代碼都不會(huì)把this指導(dǎo)當(dāng)前組件實(shí)例，因此需要修改，執(zhí)行的時(shí)機(jī)；修改到mounted里面去mounted(){this['funName']=afterNClick(()=>{/**這個(gè)時(shí)候this，一定是當(dāng)前組件**/})}當(dāng)前這樣寫(xiě)的問(wèn)題是，沒(méi)辦法直接在template里面進(jìn)行使用了，因此需要在套一個(gè)方法methods:{click:()=>{this.['funName']();}}思路如上，具體代碼如下：

反對(duì) 回復(fù) 2019-08-24

慕沐林林

TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊

about:function(){afterNClick(()=>{console.log(this);this.$alert('test');});}//或者about:function(){letts=this;afterNClick(()=>{console.log(ts);ts.$alert('test');});}另外，很好奇。你的afterNClick是vue實(shí)例的其中一個(gè)method嗎？如果這個(gè)方法從需求上講就應(yīng)該隸屬于該實(shí)例，請(qǐng)盡量寫(xiě)入該實(shí)例的methods里。vue中，this默認(rèn)指向當(dāng)前vue實(shí)例。使用箭頭函數(shù)并不會(huì)改變this指向。