naive-ui在setup引用message的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了naive-ui在setup引用message的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

序：

先说好，能用，而且不用新建啥目录，但是官方不推荐！！！！，但是快！！！

n-message-provider,TypeScript,vue,typescript,vue.js

上图的的api文档地址点右边===》Naive UI

原文是=》如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。

顺带一提，你像Error: [naive/use-dialog]: No outer <n-dialog-provider /> founded.本博文一样适用。

你要是卡到什么前端问题，也可以去博主的公众号下留言!

n-message-provider,TypeScript,vue,typescript,vue.js

正文

博主vue3 ts5.x vite 4.x

好，我要开始了！！！

app.vue部分

<script setup lang="ts">
import {RouterView } from 'vue-router'
import { NMessageProvider } from "naive-ui";
</script>
<template>
  <n-message-provider>
    <MessageApi />
  </n-message-provider>
  <RouterView />
</template>
<style >

</style>

message 部分

n-message-provider,TypeScript,vue,typescript,vue.js

<script setup lang="ts" >
	import { createDiscreteApi } from "naive-ui"
	const { message } = createDiscreteApi(["message"])
    message.warning("用户名密码必填！");
</script>

当然你也可以一次性引入多个，比如我现在引入dialog

import { createDiscreteApi } from "naive-ui"
const { message,dialog,notification,loadingBar} = createDiscreteApi(['message', 'dialog', 'notification', 'loadingBar'])
dialog.warning({
	title: '使用渲染函数',
	content: () => 'Content',
	action: () => 'Action'
})

n-message-provider,TypeScript,vue,typescript,vue.js