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";
            },