<template> <n-config-provider :theme="theme"> <n-card> <n-space> <n-button @click="theme = darkTheme"> 深色 </n-button> <n-button @click="theme = null"> 浅色 </n-button> </n-space> </n-card> </n-config-provider> </template> <script> import { defineComponent, ref } from "vue"; import { darkTheme } from "naive-ui"; export default defineComponent({ setup() { return { darkTheme, theme: ref(null) }; } }); </script>用组合式api写，例如<script setup></script>写这里面>

当使用组合式 API 来编写 Vue 组件时，可以在 `<script setup>` 区块中声明组件的 props、data、computed、methods 等选项。

对于上面的代码片段，可以使用以下代码来使用组合式 API：

<template>
  <n-config-provider :theme="theme">
    <n-card>
      <n-space>
        <n-button @click="changeToDarkTheme">
          深色
        </n-button>
        <n-button @click="changeToLightTheme">
          浅色
        </n-button>
      </n-space>
    </n-card>
  </n-config-provider>
</template>

<script setup>
import { ref } from "vue";
import { darkTheme } from "naive-ui";

const theme = ref(null);

function changeToDarkTheme() {
  theme.value = darkTheme;
}

function changeToLightTheme() {
  theme.value = null;
}
</script>

在这里，我们使用 `const` 声明了一个 `theme` 的响应式引用，然后用 `function` 来定义了切换主题的方法。接着在模板中，我们使用 `@click` 监听器来调用这些方法，以切换主题。