Vue组件中如何在外部类中调用export default内定义的方法？

嘿，我完全懂你碰到的这个坑！你在Vue组件文件里定义了一个SimpleTest类，想让类里的pong方法调用组件methods里的map函数，但报错this.map is not a function对吧？这问题根源其实很简单——SimpleTest实例的this和Vue组件实例的this根本不是同一个东西。

你看，当你创建SimpleTest的实例时，pong方法里的this指向的是SimpleTest自己的实例，它压根不知道Vue组件里的map方法存在。要解决这个问题，核心就是让外部类能拿到Vue组件的实例，下面给你几个实用的方案：

方案一：把组件实例传递给外部类 #

这是最直观也最常用的方法，在创建SimpleTest实例时，把Vue组件的this（也就是组件实例）传进去，然后在类里用这个实例调用组件方法：

class SimpleTest {
  // 构造函数接收Vue组件实例
  constructor(vueInstance) {
    this.vueInstance = vueInstance;
  }
  pong() {
    // 通过保存的组件实例调用map方法
    this.vueInstance.map();
  }
}

export default {
  name: 'Test',
  data() {
    return {
      init: false,
    }
  },
  methods: {
    map() {return "Simple Return";},
  },
  mounted() {
    // 创建实例时把组件的this传进去
    let simpleOne = new SimpleTest(this);
    simpleOne.pong();
  }
}

方案二：手动绑定上下文到组件实例 #

如果你不想修改类的构造函数，也可以在调用pong方法时，用bind把组件的this绑定到方法上，强制改变它的上下文：

class SimpleTest {
  pong() {
    this.map();
  }
}

export default {
  // ... 其他代码不变
  mounted() {
    let simpleOne = new SimpleTest();
    // 绑定组件的this到pong方法，再调用
    simpleOne.pong.bind(this)();
  }
}

或者也可以用箭头函数来直接复用组件的上下文：

mounted() {
  let simpleOne = new SimpleTest();
  // 用箭头函数重写pong，此时this指向组件实例
  simpleOne.pong = () => { this.map(); };
  simpleOne.pong();
}

方案三：把组件方法作为参数传入 #

如果pong方法只需要调用map，也可以直接把map方法作为参数传给pong：

class SimpleTest {
  pong(callback) {
    callback();
  }
}

export default {
  // ... 其他代码不变
  mounted() {
    let simpleOne = new SimpleTest();
    // 把组件的map方法作为参数传入
    simpleOne.pong(this.map);
  }
}

这几个方案都能解决你的问题，你可以根据自己的代码场景选最适合的~

内容来源于stack exchange