Arco Design 的 Message 消息组件怎么在 Vue3 中全局调用不生效？

乐佳提问于 2026-03-16 09:39:22 阅读 41

组件

我在 Vue3 项目里按文档引入了 Arco Design，想用 Message 全局提示，但调用 this.$message 或直接 message.success 都报错，说方法不存在。是不是要用 app.use 注册？

我试过在 main.js 里加了 Arco 的全局注册，但还是不行。下面是我的引入方式：

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import App from './App.vue'

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

然后在组件里写 message.success('成功') 就提示 message 未定义，这到底该怎么用啊？

我来解答赞 19 收藏

反馈

2 条解答

夏侯沁仪 Lv1

我之前也被这个坑折腾过，其实问题出在你没有单独引入 Message 组件。虽然 Arco Design 的基础组件通过 app.use 注册了，但 Message 这种独立的功能需要单独引入。

首先在 main.js 里加上这句：

import { Message } from '@arco-design/web-vue'

然后在 app 创建后添加全局属性：

app.config.globalProperties.$message = Message

这样你在组件里就能用 this.$message.success('提示内容') 了。别走弯路去改什么原型链，这种写法最稳当。

顺便说下，如果你觉得 this.$message 写着麻烦，也可以直接在每个需要用到的组件里局部引入：

import { Message } from '@arco-design/web-vue'

然后就直接用 Message.success() 就行了。

记住，Arco 的一些插件式功能都要单独引入，这点很容易被忽视，我也踩过。

2026-03-29 17:10

ლ芳宁 Lv1

你用 app.use(ArcoVue) 注册的是组件库本身，但 Message 不在这个默认注册范围内，得单独处理。

两种方式：

方式一：直接引入（最简单）

在用到的地方直接 import：

import { Message } from '@arco-design/web-vue';



Message.success('成功');

Message.error('失败');

Message.warning('警告');

方式二：挂载到全局

在 main.js 里把 Message 挂载到 app.config.globalProperties：

import { createApp } from 'vue'

import ArcoVue from '@arco-design/web-vue';

import { Message } from '@arco-design/web-vue';

import '@arco-design/web-vue/dist/arco.css';

import App from './App.vue'



const app = createApp(App);

app.config.globalProperties.$message = Message;

app.use(ArcoVue);

app.mount('#app');

然后在组件里用：

// 选项式 API

this.$message.success('成功')



// 组合式 API

import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

proxy.$message.success('成功');

建议用方式一，直接 import 用起来更直观，也不容易踩坑。

2026-03-16 16:07