Vue 中定义全局方法

问题

如何在 Vue 中定义全局方法，让所有组件都能访问？

解答

Vue 2：通过 Vue.prototype

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

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');

组件中使用方式与 Vue 2 相同。

使用全局混入（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.mixin(globalMixin);

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

创建插件

// 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.use(myPlugin);

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

关键点

• Vue 2 使用 Vue.prototype，Vue 3 使用 app.config.globalProperties
• 全局方法建议以 $ 开头，避免与组件方法冲突
• Mixin 会影响所有组件，谨慎使用
• 插件方式更适合封装可复用的功能模块