在 Vue.js 中定义全局方法，可以通过多种方式实现，包括直接在 Vue 的原型对象上添加方法、使用 Vue 3 的全局 API (app.config.globalProperties)、以及通过混入 (mixin) 等方法。

以下是几种常见的方法：

方法一：在 Vue 2 中通过 Vue.prototype 定义全局方法

复制
1// main.js
2import Vue from 'vue';
3import App from './App.vue';
4
5Vue.config.productionTip = false;
6
7// 定义全局方法
8Vue.prototype.$myGlobalMethod = function () {
9  console.log('这是一个全局方法');
10};
11
12new Vue({
13  render: h => h(App),
14}).$mount('#app');

在组件中使用

复制
1<template>
2  <div>
3    <button @click="useGlobalMethod">调用全局方法</button>
4  </div>
5</template>
6
7<script>
8export default {
9  methods: {
10    useGlobalMethod() {
11      this.$myGlobalMethod();
12    }
13  }
14}
15</script>

方法二：在 Vue 3 中通过 app.config.globalProperties 定义全局方法

复制
1// main.js
2import { createApp } from 'vue';
3import App from './App.vue';
4
5const app = createApp(App);
6
7// 定义全局方法
8app.config.globalProperties.$myGlobalMethod = function () {
9  console.log('这是一个全局方法');
10};
11
12app.mount('#app');

在组件中使用

复制
1<template>
2  <div>
3    <button @click="useGlobalMethod">调用全局方法</button>
4  </div>
5</template>
6
7<script>
8export default {
9  methods: {
10    useGlobalMethod() {
11      this.$myGlobalMethod();
12    }
13  }
14}
15</script>

方法三：使用混入（Mixin）

你可以创建一个混入对象并将其全局注册，从而在所有组件中使用这个混入对象定义的方法。

复制
1// globalMixin.js
2export const globalMixin = {
3  methods: {
4    $myGlobalMethod() {
5      console.log('这是一个全局方法');
6    }
7  }
8};

复制
1// main.js
2import Vue from 'vue';
3import App from './App.vue';
4import { globalMixin } from './globalMixin';
5
6Vue.config.productionTip = false;
7
8// 全局混入
9Vue.mixin(globalMixin);
10
11new Vue({
12  render: h => h(App),
13}).$mount('#app');

在组件中使用

复制
1<template>
2  <div>
3    <button @click="useGlobalMethod">调用全局方法</button>
4  </div>
5</template>
6
7<script>
8export default {
9  methods: {
10    useGlobalMethod() {
11      this.$myGlobalMethod();
12    }
13  }
14}
15</script>

方法四：创建插件

你可以创建一个 Vue 插件来封装全局方法，并在 main.js 中安装插件。

复制
1// myPlugin.js
2export default {
3  install(Vue) {
4    Vue.prototype.$myGlobalMethod = function () {
5      console.log('这是一个全局方法');
6    }
7  }
8};

复制
1// main.js
2import Vue from 'vue';
3import App from './App.vue';
4import myPlugin from './myPlugin';
5
6Vue.config.productionTip = false;
7
8// 安装插件
9Vue.use(myPlugin);
10
11new Vue({
12  render: h => h(App),
13}).$mount('#app');

在组件中使用

复制
1<template>
2  <div>
3    <button @click="useGlobalMethod">调用全局方法</button>
4  </div>
5</template>
6
7<script>
8export default {
9  methods: {
10    useGlobalMethod() {
11      this.$myGlobalMethod();
12    }
13  }
14}
15</script>