Vue3/Vuetify：如何在withDefaults中访问useTheme组合式函数数据？

你遇到的问题核心是：defineProps 和 withDefaults 会被Vue提升到模块作用域执行，根本访问不到<script setup>里的组合式函数返回值。别在props默认值里碰组合式函数，换个思路在setup里处理：

1. 先定义props时不给color关联主题的默认值，只做基础定义
2. 在setup里用computed生成最终要用到的颜色值，优先用父组件传的props.color，没传就用theme的数据

代码示例：

<script setup lang="ts">
import { computed } from 'vue'
import { useTheme } from 'vuetify'

const theme = useTheme()

interface Props {
  title: string
  color?: string // 这里不设依赖theme的默认值
}

const props = defineProps<Props>()

// 用computed处理最终颜色：传了用传的，没传用主题相关值
const finalColor = computed(() => {
  return props.color || theme.global.name.value === 'dark' ? 'white' : 'black'
})
</script>

<template>
  <!-- 组件里用finalColor代替props.color -->
  <div :style="{ color: finalColor }">{{ title }}</div>
</template>

这么做的好处：

• 完全符合Vue的规则，不会触发报错
• 能响应theme和props的变化，保持响应式
• 不用通过父组件传主题值，依然保留组合式函数的优势

如果非要在props层面处理（不推荐，因为props默认值应该是静态或仅依赖上下文的简单值），另一种方式是用选项式API的脚本标签，注意Vuetify的useTheme在选项式里的用法：

<script lang="ts">
import { useTheme } from 'vuetify'

export default {
  props: {
    title: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default() {
        const theme = useTheme()
        return theme.global.name.value === 'dark' ? 'white' : 'black'
      }
    }
  }
}
</script>

<script setup lang="ts">
const props = defineProps<{ title: string; color?: string }>()
</script>

不过这种方式不如第一种灵活，选项式里的默认值函数虽然能调用useTheme，但响应式处理不如setup里的computed直接，更推荐第一种方案。

内容的提问来源于stack exchange，提问作者Jer