Vue3.0如何设置全局组件并使用实例对象

最新推荐文章于 2024-04-17 18:00:36 发布

qq_35474066

最新推荐文章于 2024-04-17 18:00:36 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_35474066/article/details/116495919

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue 2.0和Vue 3.0中注册全局组件，特别是如何创建并使用名为$Msg的全局属性来显示消息提示。在Vue 2.0中，通过Vue.prototype扩展原型链实现；而在Vue 3.0中，利用createApp的config.globalProperties进行设置。同时，针对Vue 3.0的setup语法特性，展示了如何在setup函数内部通过getCurrentInstance获取proxy来调用全局属性。

摘要由CSDN通过智能技术生成

在main.js 注册全局组件（prototype）可以访问的属性
vue2.0

Vue.prototype.$Msg = (info, msgType) => {
    ElMessage ({ message: info, type: msgType, customClass: 'm-z-index' })
}

const app = createApp(App)
app.config.globalProperties.$Msg = (info, msgType) => {
    ElMessage ({ message: info, type: msgType, customClass: 'm-z-index' })
}

在vue中使用 msg全局属性
vue2.0

	this.$Msg('提示内容','error')

在vue3.0 setup无法使用this（setup 是vue还没有创建前就执行的所以无法使用this）
 import {reactive,toRefs,getCurrentInstance } from 'vue'
  setup(){
            const { proxy } = getCurrentInstance(); 
            proxy 就是组件实例化对象
            proxy.$Msg(‘提示内容’, 'error');
          }