当前位置：首页 > news >正文

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

news 2025/8/2 0:58:14

在 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