【2022-8-24】vue2中使用箭头函数踩坑记录

vue2项目使用箭头函数的坑

ES6的箭头函数，在实际开发中使用的是比较多的，今天在实现一个小功能时，由于箭头函数的问题，导致浪费了半天时间。特此记录！

错误示例

使用el-tabs组件，需要根据对应组件的name属性，来动态的显示某一类型的组件。基本功能就是这样，我们获取到对应tab-pane的name即可进行显示逻辑的处理；

代码

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="1">用户管理 {{ tabIndex }}</el-tab-pane>
    <el-tab-pane label="配置管理" name="2">配置管理 {{ tabIndex }}</el-tab-pane>
    <el-tab-pane label="角色管理" name="3">角色管理 {{ tabIndex }}</el-tab-pane>
    <el-tab-pane label="定时补偿" name="4">定时补偿 {{ tabIndex }}</el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data () {
    return {
      activeName: '1',
      tabIndex: 1
    };
  },
  methods: {
    handleClick: (tab, event) => {
      console.log(tab, event);
      this.tabIndex = parseInt(tab.name)
    }
  }
};
</script>

效果

可以看到，定义的tabIndex属性并不会随着点击变化。，仿佛数据失去了响应式变化。通过使用 this.$forceUpdate 方法强制更新数据，但是结果与先前一致；经过排查，发现点击click方法，使用箭头函数后，导致此问题。

正确用法

代码

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="1">用户管理 {{ tabIndex }}</el-tab-pane>
    <el-tab-pane label="配置管理" name="2">配置管理 {{ tabIndex }}</el-tab-pane>
    <el-tab-pane label="角色管理" name="3">角色管理 {{ tabIndex }}</el-tab-pane>
    <el-tab-pane label="定时补偿" name="4">定时补偿 {{ tabIndex }}</el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data () {
    return {
      activeName: '1',
      tabIndex: 1
    };
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);
      this.tabIndex = parseInt(tab.name)
    }
  }
};
</script>

效果

tips

箭头函数虽好，但也不要滥用，否则有些问题解决的时候真的很费劲~~~