vue中引用了别的组件 ，如何使this指向Vue对象

Question

1. 我引用了VueAwesomeSwiper轮播图组件，想要在轮播结束的时候执行一些操作。配置项里有个onTransitionStart方法，但是this指向swiper，我想把swiper里的index赋值给vue里的index，但是this指向不对，用that替换也不行，如何解决？

配置项如下

  data() {
      return {
        index:"",
        swiperOptionTop: {
          autoplay:true,
          notNextTick: true,
          speed:3000,
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          spaceBetween: 10,
          onTransitionStart (swiper) {
            // let that=this
            console.log(this)
            console.log(swiper.activeIndex)
            let index=swiper.activeIndex

            // this.index=index
            // let that.middlePoint=this.lines[index].middlePoint
          }
        },

        lines:{},
        middlePoint:""
      }
    },

1. 问题是我再onTransitionStart这个swiper方法中打印出的this 是swiper，如何让这里面的this指向vue对象，我想根据index操作lines里面的数据

Answer 1

可以在 onTransitionStart emit 一个事件
用事件来处理

或者 用箭头函数 尝试一下，（没有试过，自己尝试）

onTransitionStart： (swiper) => {
            // let that=this
            console.log(this)
            console.log(swiper.activeIndex)
            let index=swiper.activeIndex

            // this.index=index
            // let that.middlePoint=this.lines[index].middlePoint
          }

Answer 2

你可以在你的方法外面定义一个变量
`var myVue = {}
export default {

name: 'vue_tabledemo1',

// 初始化

data () {
console.log(myVue)
return {
//TODO 这里可以得到这个this
}
},
beforeCreate () {
myVue = this
}
}

created
`

Answer 3

我现在习惯在控制器最顶端定义上 var ctrl = this;
找不到this的地方就用ctrl

Answer 4

import Vue from 'vue'
const $vue = new Vue()

.vue里面的this = 这里的$vue

Answer 5

我的版本是基于Swiper4.0的vue-awesome-swiper ^3.1.3;
直接就()=>{}改变this指向当前vue实例对象 然后this.swiper就是这个swiper对象了;