1.箭头函数解决function中访问this报错问题
at HTMLDivElement.eval (vehicleWarning.vue?3b7d:72)
wecom-temp-3ac472954edf6985ee245732dc0b347a.png
// 报错如下（迷惑点：$refs['warningList']正常是可以访问到的）
// 原因：函数里this的指向不再是外层了
vehicleWarning.vue?3b7d:71 Uncaught TypeError: Cannot read properties of undefined (reading 'warningList')
at HTMLDivElement.eval (vehicleWarning.vue?3b7d:72)
image.png
解决方案：使用箭头函数
image.png
**箭头函数基本特点**
**(1). 箭头函数this为父作用域的this，不是调用时的this**
箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。
let person = {
name:'jike',
init:function(){ //为body添加一个点击事件，看看这个点击后的this属性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在浏览器默认是调用时的对象是其父作用域的
}
}
}
person.init();
上例中，init是function，以person.init调用，其内部this就是person本身，而onclick回调是箭头函数，
其内部的this，就是父作用域的this，就是person，能得到name。
let person = {
name:'jike',
init:()=>{ //为body添加一个点击事件，看看这个点击后的this属性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在浏览器默认是调用时的对象是全局window
}
}
}
person.init();
上例中，init为箭头函数，其内部的this为全局window，onclick的this也就是init函数的this，也是window，
得到的this.name就为undefined。
2.替换有赞组件中搜索框右边删除叉号的样式和点击事件，替换左边放大镜UI显示方案
<van-sticky>
<form action="/">
<van-search
v-model="searchText"
:left-icon="searchIcon" // 图标替换成自己的
:right-icon="rightIcon" // 图标替换成自己的
: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]; // 获取右边图标
this.clearIcon = righticon;
this.clearIcon.style.display = "none"; // 文字为空时默认不显示
// 添加清除图标的点击事件
this.clearIcon.addEventListener('click', () => {
this.onClear()
}, false);
},
// 文字输入监听事件，来决定图标的显示或者隐藏
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";
},
