1.箭頭函數(shù)解決function中訪問this報錯問題
at HTMLDivElement.eval (vehicleWarning.vue?3b7d:72)
wecom-temp-3ac472954edf6985ee245732dc0b347a.png
// 報錯如下（迷惑點：$refs['warningList']正常是可以訪問到的）
// 原因：函數(shù)里this的指向不再是外層了
vehicleWarning.vue?3b7d:71 Uncaught TypeError: Cannot read properties of undefined (reading 'warningList')
at HTMLDivElement.eval (vehicleWarning.vue?3b7d:72)
image.png
解決方案：使用箭頭函數(shù)
image.png
**箭頭函數(shù)基本特點**
**(1). 箭頭函數(shù)this為父作用域的this，不是調(diào)用時的this**
箭頭函數(shù)的this永遠(yuǎn)指向其父作用域淑翼，任何方法都改變不了玄括，包括call遭京，apply洁墙，bind热监。
普通函數(shù)的this指向調(diào)用它的那個對象孝扛。
let person = {
name:'jike',
init:function(){ //為body添加一個點擊事件幽崩，看看這個點擊后的this屬性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在瀏覽器默認(rèn)是調(diào)用時的對象是其父作用域的
}
}
}
person.init();
上例中苦始，init是function，以person.init調(diào)用慌申，其內(nèi)部this就是person本身陌选，而onclick回調(diào)是箭頭函數(shù)理郑，
其內(nèi)部的this，就是父作用域的this咨油，就是person您炉，能得到name。
let person = {
name:'jike',
init:()=>{ //為body添加一個點擊事件役电，看看這個點擊后的this屬性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在瀏覽器默認(rèn)是調(diào)用時的對象是全局window
}
}
}
person.init();
上例中赚爵，init為箭頭函數(shù)，其內(nèi)部的this為全局window法瑟，onclick的this也就是init函數(shù)的this冀膝，也是window，
得到的this.name就為undefined窝剖。
2.替換有贊組件中搜索框右邊刪除叉號的樣式和點擊事件采郎，替換左邊放大鏡UI顯示方案
<van-sticky>
<form action="/">
<van-search
v-model="searchText"
:left-icon="searchIcon" // 圖標(biāo)替換成自己的
:right-icon="rightIcon" // 圖標(biāo)替換成自己的
:clearable="false"
placeholder="搜索車牌號"
@search="onSearch"
@clear="onClear"
@input="inputChange"
@focus="inputChange"
@blur="endChange"/>
</form>
</van-sticky>
// js的data
data () {
return {
current: '1',
showPopup: false,
searchText: '',
searchIcon: require("@/assets/imgs/search.png"),
rightIcon: require("@/assets/imgs/guanbi.png"),
clearIcon: undefined
}
},
// 在mounted方法里獲取元素添加自定義清除叉號事件
mounted () {
this.getVehCount({ partnerCode: '12', status: '1' });
this.refreshData();
var righticon = document.getElementsByClassName("van-field__right-icon")[0]; // 獲取右邊圖標(biāo)
this.clearIcon = righticon;
this.clearIcon.style.display = "none"; // 文字為空時默認(rèn)不顯示
// 添加清除圖標(biāo)的點擊事件
this.clearIcon.addEventListener('click', () => {
this.onClear()
}, false);
},
// 文字輸入監(jiān)聽事件慎颗，來決定圖標(biāo)的顯示或者隱藏
inputChange () {
if (this.searchText.length > 0) {
this.clearIcon.style.display = "block";
} else {
this.clearIcon.style.display = "none";
}
},
endChange () {
// this.clearIcon.onclick = null
},
onSearch (val) {
this.current = val;
this.refreshData();
},
refreshData () {
this.$nextTick(() => {
this.$refs['warningList'].refreshData(this.searchText);
});
},
onClear () {
this.searchText = ''
this.refreshData();
this.clearIcon.style.display = "none";
},
