vue3如何在this.$message调用naiveui中的useMessage

说之前嘴欠一句：“都使用vue3了，为啥不用setup函数，用起useMesage，用起<script setup>”。有可能你是在迁移vue2的代码吧，代码重构之前让代码能够运行。

解决方案：

方案一：

增加一个组件 message-api.vue

代码如下：

<template>
  <div></div>
</template>

<script>
import { defineComponent, getCurrentInstance } from 'vue';
import { useMessage } from 'naive-ui';

export default defineComponent({
  setup() {
    const ctx = getCurrentInstance();
    if (ctx) {
      const message = useMessage();
      ctx.appContext.config.globalProperties.$message = message;
    }
  },
});
</script>

然后在根组件App.vue中使用n-messae-provider包裹message-api组件

代码如下：

<template>
  <n-message-provider>
    <message-api ></message-api>
  </n-message-provider>
  <n-notification-provider>
    <notification-api></notification-api>
  </n-notification-provider>
  <router-view />
</template>

<script setup>
import MessageApi from './components/message-api.vue';
import NotificationApi from './components/notification-api.vue';
</script>

naiveui中notification也可以使用这个方式。

typescript类型声明如下所示：

import {
  MessageApi,
  NotificationApi
} from 'naive-ui'

declare module '@vue/runtime-core' {
  // eslint-disable-next-line no-unused-vars
  interface ComponentCustomProperties {
      $message: MessageApi;
      $notification: NotificationApi;
  }
}

如此就可以在页面中的子组件中使用$message了，

例:
this.$message.info('naive-ui 中$message的使用方式')

方案二：

建议使用vue3到插件写法进行实现