【Vue】Vue2/3全局属性配置全攻略

Vue2 与 Vue3 全局属性/方法配置指南

Vue2 实现方案

1. 原型链挂载

// main.js
import Vue from 'vue'
import App from './App.vue'Vue.prototype.$formatDate = (timestamp) => {return new Date(timestamp).toLocaleString()
}new Vue({render: h => h(App)
}).$mount('#app')

2. 组件中使用

export default {mounted() {const formatted = this.$formatDate(Date.now())console.log(formatted) // 输出当前时间的格式化字符串}
}

3. TypeScript 支持

// shims-vue.d.ts
declare module 'vue/types/vue' {interface Vue {$formatDate: (timestamp: number) => string}
}

4. 插件形式

// plugins/format.js
export default {install(Vue) {Vue.prototype.$formatDate = (timestamp) => {return new Date(timestamp).toLocaleString()}}
}// main.js
import FormatPlugin from './plugins/format'
Vue.use(FormatPlugin)

Vue3 实现方案

1. 全局属性配置

// main.js
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.config.globalProperties.$formatDate = (timestamp) => {return new Date(timestamp).toLocaleString()
}app.mount('#app')

2. 组件中使用

// 选项式API
export default {mounted() {const formatted = this.$formatDate(Date.now())console.log(formatted)}
}// 组合式API
import { getCurrentInstance } from 'vue'export default {setup() {const { proxy } = getCurrentInstance()const formatted = proxy?.$formatDate(Date.now())return { formatted }}
}

3. TypeScript 支持

// global.d.ts
import { ComponentCustomProperties } from 'vue'declare module '@vue/runtime-core' {interface ComponentCustomProperties {$formatDate: (timestamp: number) => string}
}

4. 插件形式

// plugins/format.js
export default {install(app) {app.config.globalProperties.$formatDate = (timestamp) => {return new Date(timestamp).toLocaleString()}}
}// main.js
import formatPlugin from './plugins/format'
app.use(formatPlugin)

关键差异对比表

特性	Vue2	Vue3
挂载方式	Vue.prototype	app.config.globalProperties
类型声明文件	shims-vue.d.ts	global.d.ts
组合式API访问	不适用	通过getCurrentInstance().proxy
插件安装参数	Vue构造函数	app实例
类型扩展接口	Vue interface	ComponentCustomProperties

注意事项

1. 命名冲突：始终使用$前缀避免与组件属性冲突
2. 响应性：挂载的属性默认不是响应式的，需要自行处理
3. 组合式API：建议优先使用provide/inject进行组件通信
4. 安全访问：组合式API中需处理getCurrentInstance()可能为null的情况
5. 版本兼容：Vue3的globalProperties在2.7+版本也可用，但建议使用对应版本方案

最佳实践建议：

• 简单工具方法使用全局属性
• 复杂逻辑建议使用Composable函数（Vue3）或Mixin（Vue2）
• 优先考虑按需引入而非全局挂载
• 重要功能建议封装为插件提高可维护性
  在 Vue.js 中，如果你想在组件中通过 $ 符号访问在 main.js 中挂载到 Vue 原型上的方法或属性，可以按照以下步骤操作：

1. 在 main.js 中挂载属性或方法

在 main.js 文件中，你可以通过 Vue.prototype 添加全局属性或方法。例如：

import Vue from 'vue'
import App from './App.vue'// 在 Vue 原型上挂载一个方法或属性
Vue.prototype.$myGlobalMethod = function() {console.log('这是一个全局方法')
}Vue.prototype.$myGlobalVariable = '这是一个全局变量'new Vue({render: h => h(App),
}).$mount('#app')

2. 在组件中使用 $ 访问

在组件中，你可以直接通过 this.$myGlobalMethod 或 this.$myGlobalVariable 访问这些全局属性或方法：

export default {name: 'MyComponent',created() {// 调用全局方法this.$myGlobalMethod() // 输出: 这是一个全局方法// 访问全局变量console.log(this.$myGlobalVariable) // 输出: 这是一个全局变量}
}

3. 注意事项

• 命名规范：通常全局属性和方法以 $ 开头，以避免与组件自身的属性和方法冲突。
• TypeScript 支持：如果你使用 TypeScript，需要扩展 Vue 的类型定义。可以在 src/shims-vue.d.ts 文件中添加：

import Vue from 'vue'declare module 'vue/types/vue' {interface Vue {$myGlobalMethod: () => void$myGlobalVariable: string}
}

4. 替代方案（插件方式）

你也可以通过 Vue 插件的方式注入全局属性和方法：

// myPlugin.js
export default {install(Vue) {Vue.prototype.$myGlobalMethod = function() {console.log('这是一个全局方法')}Vue.prototype.$myGlobalVariable = '这是一个全局变量'}
}

然后在 main.js 中使用插件：

import Vue from 'vue'
import App from './App.vue'
import myPlugin from './myPlugin'Vue.use(myPlugin)new Vue({render: h => h(App),
}).$mount('#app')

这样你就可以在任何组件中通过 this.$myGlobalMethod 或 this.$myGlobalVariable 访问这些全局属性和方法了。作：

1. 在 main.js 中挂载属性或方法

在 main.js 文件中，你可以通过 Vue.prototype 添加全局属性或方法。例如：

import Vue from 'vue'
import App from './App.vue'// 在 Vue 原型上挂载一个方法或属性
Vue.prototype.$myGlobalMethod = function() {console.log('这是一个全局方法')
}Vue.prototype.$myGlobalVariable = '这是一个全局变量'new Vue({render: h => h(App),
}).$mount('#app')

2. 在组件中使用 $ 访问

在组件中，你可以直接通过 this.$myGlobalMethod 或 this.$myGlobalVariable 访问这些全局属性或方法：

export default {name: 'MyComponent',created() {// 调用全局方法this.$myGlobalMethod() // 输出: 这是一个全局方法// 访问全局变量console.log(this.$myGlobalVariable) // 输出: 这是一个全局变量}
}

3. 注意事项

• 命名规范：通常全局属性和方法以 $ 开头，以避免与组件自身的属性和方法冲突。
• TypeScript 支持：如果你使用 TypeScript，需要扩展 Vue 的类型定义。可以在 src/shims-vue.d.ts 文件中添加：

import Vue from 'vue'declare module 'vue/types/vue' {interface Vue {$myGlobalMethod: () => void$myGlobalVariable: string}
}

4. 替代方案（插件方式）

你也可以通过 Vue 插件的方式注入全局属性和方法：

// myPlugin.js
export default {install(Vue) {Vue.prototype.$myGlobalMethod = function() {console.log('这是一个全局方法')}Vue.prototype.$myGlobalVariable = '这是一个全局变量'}
}

然后在 main.js 中使用插件：

import Vue from 'vue'
import App from './App.vue'
import myPlugin from './myPlugin'Vue.use(myPlugin)new Vue({render: h => h(App),
}).$mount('#app')

这样你就可以在任何组件中通过 this.$myGlobalMethod 或 this.$myGlobalVariable 访问这些全局属性和方法了。