如何在 defineProps 中设置本地默认值？答案

【问题标题】：How can I set the local default value in defineProps?如何在 defineProps 中设置本地默认值？
【发布时间】：2022-09-30 21:19:20
【问题描述】：

我尝试使用i18n 将道具的默认值设置为本地值。我正在使用 Vue 3.2 和脚本设置标签。

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

defineProps 引用本地声明的变量。

<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>

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

标签： internationalization vuejs3

【解决方案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

【讨论】：