如何在Vue.js中声明无需导入即可全局访问的函数？

方法1：通过app.config.globalProperties + getCurrentInstance #

这是Vue官方推荐的全局属性挂载方式，既能在模板中直接使用，也能在setup脚本中调用：

步骤1：在入口文件挂载全局函数 #

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

const app = createApp(App)

// 挂载自定义全局函数
app.config.globalProperties.$showMessage = (content) => {
  alert(`全局提示：${content}`)
  return content
}

app.mount('#app')

步骤2：在组件中调用 #

• 模板中直接使用：

<template>
  <button @click="$showMessage('点击了按钮')">触发全局函数</button>
</template>

• setup脚本中调用：
  需要借助getCurrentInstance获取组件实例，通过proxy访问全局函数：

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

const { proxy } = getCurrentInstance()
// 调用全局函数
proxy.$showMessage('setup中调用全局函数')
</script>

方法2：挂载到globalThis（浏览器环境友好） #

如果不想依赖Vue实例，可以直接将函数挂载到全局对象globalThis上，这种方式在setup和模板中都能直接调用，无需额外API：

步骤1：入口文件挂载 #

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

// 挂载到全局对象
globalThis.showMessage = (content) => {
  alert(`全局提示：${content}`)
  return content
}

const app = createApp(App)
app.mount('#app')

步骤2：组件中调用 #

• setup脚本直接调用：

<script setup>
// 无需导入，直接调用
showMessage('setup中直接调用全局函数')
</script>

• 模板中直接使用：

<template>
  <button @click="showMessage('模板调用全局函数')">触发提示</button>
</template>

注意：该方式在SSR（服务端渲染）环境下需谨慎使用，因为globalThis在服务端和浏览器环境的指向存在差异。

方法3：全局模块统一管理（规范且灵活） #

可以将全局函数集中到一个模块文件中，再挂载到全局，既保证代码的可维护性，又能实现全局访问：

步骤1：创建全局函数模块 #

// utils/globalFunctions.js
export const showMessage = (content) => {
  alert(`全局提示：${content}`)
  return content
}

export const formatDate = (date) => {
  return new Date(date).toLocaleDateString()
}

步骤2：入口文件挂载 #

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as globalFunctions from './utils/globalFunctions'

const app = createApp(App)

// 方式1：挂载到Vue全局属性
Object.keys(globalFunctions).forEach(key => {
  app.config.globalProperties[`$${key}`] = globalFunctions[key]
})

// 方式2：挂载到globalThis
Object.assign(globalThis, globalFunctions)

app.mount('#app')

步骤3：组件中调用 #

两种挂载方式对应不同的调用形式，选择其一即可：

• 若挂载到Vue全局属性，参考方法1的调用方式；
• 若挂载到globalThis，参考方法2的调用方式。

内容的提问来源于stack exchange，提问作者Efthakhar Bin