vue3中 如何全局挂载 对象 方法

<think>我们在Vue 3中挂载全局方法，通常有几种方式： 1. 使用app.config.globalProperties 2. 使用provide/inject（适用于需要跨组件层级传递的情况，但不完全是全局方法） 3. 使用插件（Plugin）机制 最常用且直接的方式是通过app.config.globalProperties。下面我们详细说明： ### 步骤 1. 创建Vue应用实例 2. 在应用实例上配置globalProperties 3. 在组件中使用 ### 示例代码 假设我们要挂载一个全局方法`$formatDate`，用于格式化日期。 ```javascript // main.js import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) // 挂载全局方法 app.config.globalProperties.$formatDate = function(date) { return new Date(date).toLocaleDateString() } app.mount(&#39;#app&#39;) ``` 在组件中使用： ```vue <template> <div>{{ formattedDate }}</div> </template> <script> export default { data() { return { currentDate: &#39;2023-10-01&#39; } }, computed: { formattedDate() { // 通过this访问全局方法 return this.$formatDate(this.currentDate) } } } </script> ``` ### 使用插件方式 如果全局方法较多或者需要复用，可以封装成插件。 ```javascript // plugins/globalMethods.js export default { install(app) { app.config.globalProperties.$formatDate = function(date) { return new Date(date).toLocaleDateString() } // 可以继续添加其他全局方法 } } ``` 然后在main.js中使用： ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import globalMethods from &#39;./plugins/globalMethods&#39; const app = createApp(App) app.use(globalMethods) // 注册插件 app.mount(&#39;#app&#39;) ``` ### 注意事项 - 在Vue 3的Composition API中，setup函数内部无法直接通过`this`访问globalProperties上挂载的方法。如果需要在setup中使用，可以通过`getCurrentInstance`获取当前实例，然后通过实例的`appContext`访问。 ```javascript import { getCurrentInstance } from &#39;vue&#39; export default { setup() { const { appContext } = getCurrentInstance() const $formatDate = appContext.config.globalProperties.$formatDate // 使用$formatDate const formatted = $formatDate(&#39;2023-10-01&#39;) return { formatted } } } ``` 但注意，`getCurrentInstance`在开发库或插件时使用较多，在业务代码中不推荐频繁使用，因为它会使代码与Vue实例耦合。 - 另外，也可以考虑使用模块导出（export）的方式，将方法定义在一个单独的模块中，然后在需要的地方导入使用，这样更符合组合式函数的理念。 ### 引用说明 在Vue 3中，通过`app.config.globalProperties`添加全局属性是官方推荐的方式，类似于Vue 2中的`Vue.prototype`[^1]。 §§相关问题§§ 1. Vue 3中如何为全局方法提供TypeScript支持？ 2. Vue 3的插件机制还有哪些用途？ 3. 在Vue 3的Composition API中，除了使用getCurrentInstance，还有哪些方式可以访问全局方法？ [^1]: 参考Vue官方文档：https://v3.vuejs.org/api/application-config.html#globalproperties</think>在 Vue 3 中挂载全局方法有几种推荐方式，以下是详细实现方案： ### 方法一：使用 `app.config.globalProperties` (推荐) 这是 Vue 3 官方推荐的全局方法挂载方式： ```javascript // main.js import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) // 挂载全局方法 app.config.globalProperties.$formatCurrency = function(value) { return `¥${value.toFixed(2)}` } app.mount(&#39;#app&#39;) ``` 在组件中使用： ```vue <script> export default { mounted() { // 通过 this 直接访问 console.log(this.$formatCurrency(100)) // 输出 ¥100.00 } } </script> ``` ### 方法二：使用 Provide/Inject (适合特定场景) 适合需要跨层级传递但非真正全局的场景： ```javascript // main.js import { createApp } from &#39;vue&#39; const app = createApp({ provide() { return { $globalMethod: (value) => `Processed: ${value}` } } }) ``` 在子组件中使用： ```vue <script> import { inject } from &#39;vue&#39; export default { setup() { const $globalMethod = inject(&#39;$globalMethod&#39;) console.log($globalMethod(&#39;test&#39;)) // 输出 Processed: test } } </script> ``` ### 方法三：创建自定义插件 (最模块化的方式) 适合需要复用或包含复杂逻辑的场景： ```javascript // plugins/globalMethods.js export default { install(app) { app.config.globalProperties.$fetchData = async (url) => { const response = await fetch(url) return response.json() } app.provide(&#39;$logger&#39;, (message) => { console.log(`[APP LOG]: ${message}`) }) } } ``` 在 main.js 中注册： ```javascript import globalMethods from &#39;./plugins/globalMethods&#39; const app = createApp(App) app.use(globalMethods) ``` ### 在 Composition API 中使用 ```vue <script setup> import { getCurrentInstance } from &#39;vue&#39; const { proxy } = getCurrentInstance() const amount = proxy.$formatCurrency(199.8) // ¥199.80 // 或使用注入方式 import { inject } from &#39;vue&#39; const $logger = inject(&#39;$logger&#39;) $logger(&#39;Component mounted&#39;) </script> ``` ### 注意事项 1. **命名规范**：全局方法建议以 `$` 开头（如 `$myMethod`），避免与组件属性冲突 2. **类型支持**：在 TypeScript 项目中，需要扩展 `ComponentCustomProperties`： ```typescript // global.d.ts declare module &#39;@vue/runtime-core&#39; { interface ComponentCustomProperties { $formatCurrency: (value: number) => string } } ``` 3. **避免滥用**：仅将真正全局使用的方法挂载到全局，其他方法建议使用模块导入 ### 引用说明 Vue 3 的全局属性挂载机制通过修改应用实例的 `globalProperties` 实现，类似于 Vue 2 的 `Vue.prototype` 但更模块化[^1]。当使用插件系统时，Vue 会调用插件的 `install` 方法并传入应用实例[^2]。