【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 访问这些全局属性和方法了。