vue项目中在外部js文件中直接调用vue实例的方法比如说this

在 Vue 项目中，我们通常会将 JS 代码放在 Vue 组件中，这种方式可以方便地获取 Vue 实例和数据，但是有些场景需要在外部 JS 文件中直接调用 Vue 实例的方法，这时我们需要一些特殊的处理。

在外部 JS 文件中调用 vue 实例方法的参考步骤

1. 先在外部 JS 文件中引入 Vue 库

js
import Vue from "vue";

注意： Vue 库的引入路径要根据你的项目结构进行相应的调整。

1. 创建一个 vue 实例并导出，并添加到全局对象中（window）

```js
const vm = new Vue({
data: {
message: "Hello World!"
},
methods: {
getMessage() {
return this.message;
}
}
});

window.vm = vm;
export default vm;
```

上述代码中，我们创建了一个 Vue 实例，添加了一个 data 属性和一个 methods 方法，接着将该实例添加到全局对象中 window，最后导出该实例。

1. 在外部 JS 文件中调用 Vue 实例中的方法

js
console.log(window.vm.getMessage());

在这个例子中，我们打印出了 getMessage 方法返回的字符串值。

示例

// 外部 JS 文件 test.js
import Vue from "vue";

const vm = new Vue({
  data: {
    message: "Hello World!"
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  }
});

window.vm = vm;
export default vm;

在另一个 .js 文件中，我们可以通过以下方式调用 showMessage 方法：

window.vm.showMessage();

示例2

我们还可以通过 Vue 提供的全局事件总线来实现在外部 JS 文件中调用 vue 实例方法。我们可以通过在 Vue 中创建一个事件总线 bus，然后在外部 JS 文件中 import 该实例，并使用 $emit 方法触发事件，最后在 Vue 实例的生命周期钩子中监听该事件，从而实现外部 JS 文件调用 Vue 实例的方法。

具体实现步骤如下：

1. 在 Vue 中创建一个事件总线 bus

js
import Vue from "vue";
const bus = new Vue();
export default bus;

在这里，我们使用 import 引入 Vue，并创建了一个事件总线 bus，最后将其导出。

1. 在外部 JS 文件中 import 事件总线 bus，使用 $emit 方法触发 bus 上的事件

js
import bus from "@/utils/bus.js";
bus.$emit("getMessage", message);

在这个例子中，我们通过 $emit 方法触发了 bus 上的 getMessage 事件，并向事件中传递了参数 message。

1. 在 Vue 实例中监听事件 getMessage 并执行对应方法

```js
import bus from "@/utils/bus.js";

const vm = new Vue({
data: {
message: ""
},
created() {
bus.$on("getMessage", message => {
this.message = message;
});
},
methods: {
showMessage() {
alert(this.message);
}
}
});

window.vm = vm;
export default vm;
```

首先，我们在 Vue 实例中创建了一个事件总线 bus 的实例，并在该实例的 created 生命周期钩子中监听了 getMessage 事件，当该事件触发时，我们获取参数 message 并将其赋值给 Vue 实例的 data 属性 message。最后，我们添加了一个 showMessage 方法，用于弹出属性 message 的值。

通过以上步骤，在外部 JS 文件中就能够调用 showMessage 这个方法了。例如：

window.vm.showMessage();