Message消息组件怎么在Vue3里全局调用？

Tr° 诗辰提问于 2026-03-19 17:18:18 阅读 71

组件

我用的是Element Plus的Message组件，想在axios拦截器里直接弹错误提示，但不知道怎么全局调用。试过ElMessage.error('出错了')，结果报错说ElMessage is not defined。

我在main.js里已经按需引入了Message：

import { createApp } from 'vue'
import App from './App.vue'
import { ElMessage } from 'element-plus'

const app = createApp(App)
app.use(ElMessage)
app.mount('#app')

但这样好像不行，是不是注册方式有问题？

反馈组件

我来解答赞 5 收藏

反馈

2 条解答

UP主～巧丽 Lv1

在Vue3中使用Element Plus的Message组件进行全局调用时，确实需要注意一下注册的方式。你当前在main.js里按需引入并使用app.use(ElMessage)这种方式是不对的，因为ElMessage并不是一个插件，而是一个独立的组件。

正确的做法是直接挂载到Vue实例上或者使用全局属性的方式。这里推荐使用全局属性的方式来注册，这样在任何地方都能方便地调用。

首先，在main.js里，你需要这样做：

import { createApp } from 'vue'

import App from './App.vue'

import { ElMessage } from 'element-plus'



const app = createApp(App)



// 将ElMessage挂载到全局属性上

app.config.globalProperties.$message = ElMessage



app.mount('#app')

然后在你的axios拦截器或者其他地方，你可以通过this.$message来调用它。不过在axios拦截器中，this指向可能不是Vue实例，所以你需要通过其他方式获取这个全局属性。

一种常见的解决方法是将$message挂载到window对象上，或者直接从应用实例中获取。这里推荐使用前者，简单直接：

// 继续在main.js里

window.$message = ElMessage

这样你就可以在axios拦截器或者其他任何地方直接使用$message了：

import axios from 'axios'



axios.interceptors.response.use(

  response => response,

  error => {

    // 使用全局的$message

    window.$message.error('请求失败: ' + error.message)

    return Promise.reject(error)

  }

)

这样配置之后，你应该就可以在axios拦截器中正常调用Element Plus的Message组件了。希望这能解决问题。

2026-03-23 17:08

付娟 Dev Lv1

你的问题在于 app.use(ElMessage) 这种注册方式根本不对。use() 是用来安装插件的，但 ElMessage 本身不是插件，你这么整当然会报错。

最简单直接的解决办法：直接在需要用的地方导入，别的配置都不用改。

在你的 axios 拦截器文件里这样写：

import { ElMessage } from 'element-plus'

import axios from 'axios'



const service = axios.create()



service.interceptors.response.use(

  response => response,

  error => {

    // 直接导入就能用

    ElMessage.error('出错了')

    return Promise.reject(error)

  }

)



export default service

完事儿，不需要在 main.js 里搞任何骚操作。

如果你实在想在 main.js 里全局挂载（类似于 Vue2 的 Vue.prototype），可以这样：

import { createApp } from 'vue'

import App from './App.vue'

import { ElMessage } from 'element-plus'



const app = createApp(App)

app.config.globalProperties.$message = ElMessage

app.mount('#app')

然后在组件里用 this.$message.error('xxx')，但说实话没啥必要，多导入一行的事儿更省心。

血泪教训：Element Plus 的组件和 Vue2 的 Element 玩法不一样，很多新手（包括以前的我）会惯性思维去用 use() 注册，结果踩坑。直接导入才是正道。

2026-03-19 17:25