利用箭头函数解决vue使用setTimeout的this问题和使用小技巧

注：箭头函数本身没有执行作用域，是继承其父的执行上下文，所以箭头函数的this指向绑定其父的作用域

1、在vue里面使用setTimeout发现this失效

原因是setTimeout的this指向的windows

解决：setTimeout的第一个参数的function用箭头函数来代替，原因文章开头已解释了箭头函数的作用

2、vue的方法想要同时传入事件对象和自定义参数

解决方法：

1、方法名（$event，定义参数）$event为自定义参数

2、使用箭头函数(val)=>{方法名(val,自定义参数)}

用一个小例子展示：table操作栏的下拉选择改变的时候想要对应改变这一列的值

<template>
  <div class="indexPage">
    <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
        prop="date"
        label="日期"
        width="180">
        </el-table-column>
        <el-table-column
        prop="name"
        label="姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址">
        </el-table-column>
        <el-table-column label="性别" prop="sex">
          <template slot-scope="scope">
          <el-select v-model="scope.row.sex" @change="(val)=>{changeSex(val,scope.$index)}" placeholder="请选择"> 
 <!--或者 changeSex($event,scope.$index) -->
            <el-option
              v-for="item in sexData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex:'男'
        }, {
          date: '2016-05-02',
          name: '叶晓欣',
          address: '广东广州',
          sex:'女'
        }, {
          date: '2016-05-04',
          name: '钱新倩',
          address: '北京朝阳',
          sex:'男'
        }],
        loading: true,
        sexData:[
          {
            label:'女',
            value:'女'
          },
          {
            label:'男',
            value:'男'
          }
        ]
    };
  },
  mounted() {
    this.loading = false
    setTimeout(()=>{
      console.log(this)
    },500)
  },
  methods: {
    changeSex(data,index){
      this.tableData[index].sex = data
      console.log(this.tableData[index])
    }
  }
}
</script>
<style scoped lang="scss">
  .indexPage{
    /deep/ .el-table thead th{
      background-color:#ccc;
    }
    // ::v-deep .el-table thead th{
    //   background-color:pink;
    // }
  }
  
</style>

效果如下：