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

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

组件

我在 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 未定义，这到底该怎么用啊？

我来解答赞 4 收藏

反馈

1 条解答

ლ芳宁 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