使用 vue-i18n 转换 Vue 组件 prop 的默认值

Question

我正在使用vue-i18n我的应用程序处理本地化。我需要将本地化应用于组件道具的默认值：

export default {
  name: 'ExampleComponent',
  props: [{
    prompt: {
      required: false,
      type: String,
      default: $t('example.prompt.default')
   }]
}

$t显然不在所示的范围内，但似乎在评估 prop 的默认值时，this也不是组件本身，因此this.$t也是未定义的。

使用 VueI18n 转换default道具值的最佳方法是什么？

Answer 1

您可以$t在回调函数中访问，因为回调是在创建的组件的上下文中评估的。

prompt: {
  required: false,
  type: String,
  default: function () {
    this.$t('example.prompt.default')
  }
}

这里的缺点是该值将undefined在beforeCreate生命周期挂钩中。如果您需要它，那么最好的办法是将默认值设置为 i18n 定义的键（example.prompt.default），然后使用this.$t(this.prompt)。