Preface（前言）
You can encapsulate a component to manage all NaiveUI providers in the project, which will make the code clear and easy to understand.
你可以在项目中封装一个统一管理所有 NaiveUI provider 的组件，这样会使代码清晰易懂。
Encapsulation（封装）
vue
// in app-provider.vue
<template>
<n-loading-bar-provider>
<n-message-provider>
<n-dialog-provider>
<slot></slot>
</n-dialog-provider>
</n-message-provider>
</n-loading-bar-provider>
</template>
<script>
import { defineComponent } from "vue";
import {
NMessageProvider,
NLoadingBarProvider,
NDialogProvider,
} from "naive-ui";
export default defineComponent({
name: "AppProvider",
components: {
NMessageProvider,
NLoadingBarProvider,
NDialogProvider,
},
});
</script>// in app-provider.vue
<template>
<n-loading-bar-provider>
<n-message-provider>
<n-dialog-provider>
<slot></slot>
</n-dialog-provider>
</n-message-provider>
</n-loading-bar-provider>
</template>
<script>
import { defineComponent } from "vue";
import {
NMessageProvider,
NLoadingBarProvider,
NDialogProvider,
} from "naive-ui";
export default defineComponent({
name: "AppProvider",
components: {
NMessageProvider,
NLoadingBarProvider,
NDialogProvider,
},
});
</script>Use（使用）
vue
// in App.vue
<template>
<AppProvider>
<router-view></router-view>
</AppProvider>
</template>
<script>
import { defineComponent } from "vue";
import AppProvider from "@/components/app-provider.vue";
export default defineComponent({
name: "App",
components: {
AppProvider,
},
});
</script>// in App.vue
<template>
<AppProvider>
<router-view></router-view>
</AppProvider>
</template>
<script>
import { defineComponent } from "vue";
import AppProvider from "@/components/app-provider.vue";
export default defineComponent({
name: "App",
components: {
AppProvider,
},
});
</script>
