Vue 3：在 defineProps 中设置语言环境默认值

Question

我正在尝试使用 i18n 将 prop 的默认值设置为语言环境值。我正在使用 vue 3.2 和脚本设置标签。

我尝试了以下方法，但这给了我一个错误：

defineProps are referencing locally declared variables.

<script setup>
import { useI18n } from 'vue-i18n';
    
const { t } = useI18n();
    
defineProps({
  type: { type: String, required: true },
  title: { type: String, required: false, default: `${t('oops', 1)} ${t('request_error', 1)}` },
  description: { type: String, required: false, default: '' },
  showReload: { type: Boolean, required: false, default: false },
  error: { type: String, required: true },
});
</script>

处理此问题的最佳方法是什么？

Answer 1

defineProps 是编译器宏，因此您不能在其中使用任何运行时值。我建议为此默认值使用局部变量：

<script setup>
    import { useI18n } from 'vue-i18n';

    const props = defineProps({
        type: { type: String, required: true },
        title: { type: String, required: false},
        description: { type: String, required: false, default: '' },
        showReload: { type: Boolean, required: false, default: false },
        error: { type: String, required: true },
    });


    const { t } = useI18n();
    const titleWithDefault = props.title || `${t('oops', 1)} ${t('request_error', 1)}`;
</script>

在最后一个要点中也有描述：https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits

Vue 3：在 defineProps 中设置语言环境默认值

Vue 3: Set locale default value in defineProps

internationalization

vuejs3