持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

一、前言

之前在用naive ui的表格组件的时候，我引入了个useMessage，当时不够熟悉data-table组件和vue3语法，还以为是我写错了，后面我按照官网给的例子引入，发现一直获取不到。所以专门开了一期，来稍微讲讲useMessage组件。

二、错误示范

我先举一下当时我的错误例子

首先我在xx.vue文件里引入了

import { useMessage } from 'naive-ui'

然后我在setup函数里，调用了下面这两个语句

const message = useMessage()
message.info(`Play`)

到这里我还是觉得很正常，我引入了一个东西，然后我调用它生成了message变量，然后我给message变量赋值。这是我一贯的思维，naive ui里data-table给出的相关使用例子也是这样用的，但是现实是，此处的message会是undefined，根本就没有正确使用。

想不通的我只能点开对应的组件api，才有了第三点

三、useMessage

查了一圈，基本主流都是组件的方式，挂载到全局使用。

1、创建自定义组件usemessageComponents.vue

内容比较简单，引入useMessage之后，在setup函数里，将useMessage挂载到window上的message

<script lang="ts">
import { useMessage } from 'naive-ui'
import { defineComponent } from 'vue'

// content
export default defineComponent({
  setup () {
    window.$message = useMessage() // 关键代码
  }
})
</script>

2、ts版本的话，此时会报错

在main.ts同级，创建message.d.ts（xxx.d.ts，名称随意）

import type { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider"
declare global {
  interface Window {
      $message: MessageApiInjection
  }
}

我看到有资料说declare global在typescript 3.4之后失效（本人不确定，只是道听途说）

直接用下列写法即可

  import type { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider"
  interface Window {
      $message: MessageApiInjection
  }

我的typescript 4.8.3表示，第一种写法可以，第二种写法会读取不到。

3、在APP.vue用n-message-provider包裹内容

引入一下我们上面创建的自定义组件

  import usemessageComponents from './components/usemessageComponents.vue'

然后在template里写入该内容，官方推荐写法，用n-message-provider包裹

  <n-message-provider>
    <usemessageComponents />
  </n-message-provider>

n-message-provider我已经在main.ts里全局抛出，如果没有全局抛出，那就可以单独引入

  import { NMessageProvider } from "naive-ui"

4、之后在我们的demo文件里，调用

注意不要直接在setup里调用该函数，此时会undefined，可以用nextTick，setTimeout等方式，转异步调用，或者在setup声明好函数，在渲染完成之后，点击调用。

这两种都可以在页面加载时成功调用

 <script lang="ts">
import { nextTick } from 'vue'

setTimeout(() => {
  const message = window.$message
    console.log(message)
    message.success('naive-ui 中$message的使用方式')
}, 1000)
nextTick(() => {
  const message = window.$message
    console.log(message)
    message.success('naive-ui 中$message的使用方式')
})
</script>

或者定义好mess函数，

  <script lang="ts">
  export default defineComponent({
  setup() {

    function mess():void {
      const message = window.$message
      console.log(message)
      message.success('naive-ui 中$message的使用方式')
    }
    // 必须像vue2那样return出来
    return {
      mess
    }
  }
})
  </script>

在标签里点击调用

  <span @click="mess">DATA-TABLE表格</span>

效果，能正常弹出效果，具体参数和api，后续我们再一一尝试

三、小结

今天试验了好多次，网上的资料比较少，大多数都没啥用，多方查验才终于试出来适合本项目vite构建的vue3+ts的写法，大家伙也可以配置一下试试看，希望本文能对你们有所帮助吧。

ps: 我是地霊殿__三無,加班只能水一水了。

vue3里如何使用naive ui的useMessage