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

Question

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

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

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

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

标签： javascriptvue.jsvue-i18n

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