在练习项目时遇到的关于注册全局变量的问题

487 阅读1分钟

在Vue3中注册全局变量时遇到的问题

今天在跟着B站黑马的项目开始练习,看到黑马的老师将Element-UI组件注册成了一个全局变量,很是心动,使用时却发现各种问题频出,Vue2跟Vue3的区别还是蛮大的

Vue2的步骤:

  1. 在文件中引入Element-Ui
  2. 在Vue原型上写方法:Vue.prototype.$XXX = XXX;
  3. 在别的组件使用:this.$XXX即可

Vue3的方法还是不太一样的,首先来看ElementUI官方的说法

image.png

很明显,ElemenUI官方给出了使用方法,无奈本人愚笨,还是搞了很久才明白用法,看文档说,使用this.$message唤起ElMessage,可是,我们知道,在setup中是没有this的,这时,就有一个重要的属性出来了!“getCurrentInstance”

getCurrentInstance:获取当前组件实例

请注意,此方法只能在setup中使用,貌似setup内定义的函数也是不行的,因为我在函数内log发现是null,我们在setup中打印,发现会打印出这么一些数据

image.png

wowww,这么多的数据,我们只需要该按住appContext就好了,看意思也知道这才是我们需要的

image.png

appContext下有一个config,config下有一个globalProperties,ElementUI官方说为我们添加了全局方法$message,我们可以在此处找到,然后通过.的方式使用即可,若要在函数内使用,记得要将globalProperties及以上的保存成一个变量,便于调用

image.png 然后在函数内使用即可

image.png

欢迎观看,本人小白一枚,希望能有个大佬带我,用爱发电,新手也可以一起来友好交流,普信自大狂远离,谢谢观看