vue3 + ts 如何使用elmentPlus中的全局注册函数

Vue3中使用ElementUI的$message方法,
在Vue3中,由于API的变化,不能直接在组件中通过this.$message调用ElementUI的方法。解决办法是创建一个useCurrentInstance.ts文件,导入vue的getCurrentInstance,获取全局属性并返回。然后在需要使用的地方引入这个函数,通过proxy.$message来调用ElementUI的方法。

在vue2 中 我们在main.js中引入elementUI use挂载后可以直接在页面中通过this.$message去调用element中的方法,而vue3这种不再适用

我们可以在utils 中 新建useCurrentInstance.ts 文件

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const proxy = appContext.config.globalProperties
  return {
    proxy
  }
}

在需要使用element中$message,$confirm的地方引入

import useCurrentInstance from '@/utils/useCurrentInstance'
const { proxy } = useCurrentInstance()

之后通过proxy.$message的方式去调用即可

评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值