vue项目中引入外部js，怎么在外部js中执行当前页中methods里的方法

Question

vue项目中引入外部js，怎么在外部js中执行当前页中methods里的方法

Answer 1

楼上算一种方案。

如果你引入的 JS 不好获得当前实例的引用，比如你用单文件组件，那么可以在组件 mount 的时候把方法暴露到全局环境下

// Vue

export default {

  mounted() {

    window.someMethod = this.doSomething.bind(this);

  },

}

// 在另一个 JS 里

someMethod();

不过这样会导致不同的类深度耦合，属于 bad smell。所以除非要做 jsonp 回调之类，最好不要使用。可以考虑用全局对象广播和捕获事件。

比如：

// Vue

export default {

  mounted() {

    document.body.addEventListener('some-event', this.onSomeEvent.bind(this));

  }

}

// 别的 js

const event = new CustomEvent('some-event');

document.body.dispatchEvent(event);

Answer 2

var vm = new Vue({

  methods: {

    hello () {

      console.log('hello')

    }

  }

})

vm.hello()