vue3定义全局方法

下面用element-puls中的ElMessage组件为例：

首先我在我的utils.js工具类函数方法中定义了一个方法，代码如下：

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
 export function myMessage(type, message){
    ElMessage({
        type,
        message
    })
 }

在main.js中  第一步是引入我们上一步的函数

import {myMessage} from "@/utils/tools"

第二步：在vue的实例对象身上绑定这个函数

const app = createApp(App)
app.config.globalProperties.$message = myMessage

第三步：在页面中使用

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$message('success','Hello')

需要注意的是，页面中需要引入getCurrentInstance ，因为我们需要解构出他里面的proxy方法，proxy相当于是vue2中的this