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

2022 年 7 月 25 日
本文字数：940 字
阅读完需：约 3 分钟

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

发布于: 26 分钟前阅读数: 6

原文链接:【http://xie.infoq.cn/article/94f732cb8ab5d925e13d78923】。文章转载请联系作者。