uniapp vue3 如何注册全局方法

在uniapp中使用vue3时，如何注册全局方法？我尝试了app.config.globalProperties，但在页面中调用时提示方法未定义。请问正确的注册方式是什么？是否需要额外的配置才能在各个页面和组件中使用这些全局方法？

2 回复

在Vue3中，可以通过app.config.globalProperties注册全局方法：

// main.js
const app = createApp(App)
app.config.globalProperties.$myMethod = () => {
  console.log('全局方法')
}

在组件中使用：

const { proxy } = getCurrentInstance()
proxy.$myMethod()

或者直接通过this调用（在Options API中）。


在 UniApp 中使用 Vue 3 注册全局方法，可以通过 app.config.globalProperties 实现。以下是具体步骤：

  1. 在 main.js 中定义并注册全局方法：

    import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 定义全局方法
app.config.globalProperties.$myGlobalMethod = function (param) {
  console.log('全局方法被调用，参数：', param)
  // 这里写你的方法逻辑
}

app.mount('#app')

  2. 在组件中使用全局方法： 在 Vue 3 的 <script setup> 或 setup() 中，通过 getCurrentInstance 访问：

    <script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

// 调用全局方法
proxy.$myGlobalMethod('Hello World')
</script>

注意事项：

  • 建议全局方法名以 $ 开头，避免与组件属性冲突。
  • 在组合式 API 中需通过 getCurrentInstance().proxy 调用。
  • 适用于工具函数（如格式化日期、网络请求封装）。

如果需要复用多个方法，可将方法提取到单独文件：

// utils/globalMethods.js
export const globalMethods = {
  $method1() { /* ... */ },
  $method2() { /* ... */ }
}

// main.js
import { globalMethods } from '@/utils/globalMethods'
Object.assign(app.config.globalProperties, globalMethods)

这样即可在任意组件中调用注册的全局方法。

回到顶部