Naive UI 的 Message 消息为啥不显示？

司翰提问于 2026-03-27 14:14:22 阅读 6

组件

我按照文档在 React 项目里用 Naive UI 的 message，但点击按钮完全没反应，控制台也没报错。是不是漏了啥配置？

我试过直接调用 window.$message，也试过从 setup 里 return 出来，都不行。

import { createDiscreteApi } from 'naive-ui'

const { message } = createDiscreteApi(['message'])

function handleClick() {
  message.success('操作成功！')
}

我来解答赞 1 收藏

反馈

1 条解答

UI美蓝 Lv1

看起来你已经创建了 discrete API 实例，但可能忽略了挂载点的问题。Naive UI 的 message 需要一个有效的 DOM 节点来渲染。

首先确认你的项目里有 app 这个根节点，并且在初始化时正确传递给 Naive UI：

import { createApp } from 'vue'

import App from './App.vue'

import { createDiscreteApi } from 'naive-ui'



const app = createApp(App)

const { message } = createDiscreteApi(['message'], {

  app

})



app.mount('#app')

另外别忘了检查浏览器兼容性，虽然现代浏览器都没问题，但 IE11 可能会有坑。如果还是不行，试着在 handleClick 里加个 console.log 确认函数确实被调用了。有时候明明代码没问题，就是某个地方没触发而已，这种小细节最容易让人抓狂。

2026-03-27 14:21