怎么在 Vue 中定义全局方法？

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

以下是几种常见的方法：

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

// main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

// 定义全局方法
Vue.prototype.$myGlobalMethod = function () {
  console.log("这是一个全局方法");
};

new Vue({
  render: (h) => h(App),
}).$mount("#app");

在组件中使用

<template>
  <div>
    <button @click="useGlobalMethod">调用全局方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    useGlobalMethod() {
      this.$myGlobalMethod();
    }
  }
}
</script>

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

// main.js
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

// 定义全局方法
app.config.globalProperties.$myGlobalMethod = function () {
  console.log("这是一个全局方法");
};

app.mount("#app");

在组件中使用

<template>
  <div>
    <button @click="useGlobalMethod">调用全局方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    useGlobalMethod() {
      this.$myGlobalMethod();
    },
  },
};
</script>

方法三：使用混入（Mixin）

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

// globalMixin.js
export const globalMixin = {
  methods: {
    $myGlobalMethod() {
      console.log("这是一个全局方法");
    },
  },
};

// main.js
import Vue from "vue";
import App from "./App.vue";
import { globalMixin } from "./globalMixin";

Vue.config.productionTip = false;

// 全局混入
Vue.mixin(globalMixin);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

在组件中使用

<template>
  <div>
    <button @click="useGlobalMethod">调用全局方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    useGlobalMethod() {
      this.$myGlobalMethod();
    },
  },
};
</script>

方法四：创建插件

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

// myPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$myGlobalMethod = function () {
      console.log("这是一个全局方法");
    };
  },
};

// main.js
import Vue from "vue";
import App from "./App.vue";
import myPlugin from "./myPlugin";

Vue.config.productionTip = false;

// 安装插件
Vue.use(myPlugin);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

在组件中使用

<template>
  <div>
    <button @click="useGlobalMethod">调用全局方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    useGlobalMethod() {
      this.$myGlobalMethod();
    },
  },
};
</script>