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

在 Vue 中定义全局方法主要有以下几种方式，适用于不同版本：

1. Vue 2 中：通过 Vue.prototype 挂载

// main.js
import Vue from 'vue'

// 定义全局方法
Vue.prototype.$myGlobalMethod = function(params) {
  // 方法逻辑
  console.log('全局方法调用', params)
}

// 在组件中使用
export default {
  mounted() {
    this.$myGlobalMethod('参数') // 直接通过 this 调用
  }
}

2. 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(params) {
  console.log('全局方法调用', params)
}

app.mount('#app')

// 在组件中使用（需通过 getCurrentInstance 获取）
import { getCurrentInstance } from 'vue'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    proxy.$myGlobalMethod('参数') // 调用全局方法
  }
}

3. 通过插件形式定义（推荐，适用于 Vue 2/3）

// plugins/globalMethods.js
export default {
  install(Vue) { // Vue 2 接收 Vue 构造函数；Vue 3 接收 app 实例
    // 定义全局方法
    Vue.$myMethod = function() { /* ... */ }
    // 或挂载到原型（Vue 3 用 app.config.globalProperties）
    Vue.prototype.$myMethod = function() { /* ... */ }
  }
}

// 注册插件（main.js）
import Vue from 'vue' // Vue 2
// import { createApp } from 'vue' // Vue 3
import globalMethods from './plugins/globalMethods'

Vue.use(globalMethods) // Vue 2
// app.use(globalMethods) // Vue 3