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

发布于
# naive-ui # vue3

直接说解决方案:

增加一个组件 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的使用方式')

找到 0 条评论