vue2升级vue3：vue3创建全局属性和方法

原创

周陆军博客

发布于 2022-07-25 23:07:48

1.1K0

发布于 2022-07-25 23:07:48

文章被收录于专栏：前端博客

vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法

在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了globalProperties

import { createApp } from 'vue'
import App from './App'
import router from '@router/index'

const app = createApp(App).app.use(router).mount('#app')
app.config.globalProperties.$demoe = 'demo'

注意：千万不能这样子写：

createApp(App).config.globalProperties.$httpUrl = 'https://www.baidu.com'
createApp(App).use(router)
    .use(store)
    .use(elementPlusUI)
    .mount('#app')

//或者是这样
const app = createApp(App)
createApp(App).config.globalProperties.$httpUrl = 'https://www.baidu.com'
app.use(router)
    .use(store)
    .use(elementPlusUI)
    .mount('#app')

第一种相当于我们直接调用了两次createApp(App)，

最后调的那次里面压根就没有我们需要配置的全局变量，会返回undefined

在 compose api 如何用？

只需要从vue引入一个方法即可，不能在页面中使用this获取

import { defineComponent, getCurrentInstance, onMounted } from "vue"
export default defineComponent({
  setup (props, {emit}) {
     // console.log(this)
      const { appContext : { config: { globalProperties } },proxy} = getCurrentInstance()
      const { ctx, proxy } = getCurrentInstance()
      console.log(globalProperties.$demo)
      return {
          proxy
      }
  }
})

ctx和proxy都可以访问到定义的全局方法，但是ctx只能在本地使用，线上环境使用proxy

不管怎么样，在vue3项目，个人不推荐关在全局变量与属性。

参考文章：

vue3创建全局属性和方法 https://segmentfault.com/a/1190000040224048

vue3中挂载全局变量 https://blog.csdn.net/weixin_43090018/article/details/117222606

转载本站文章《vue2升级vue3：vue3创建全局属性和方法》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8861.html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js