使用 vue-i18n 翻译 Vue 组件属性的默认值

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')
  }
}

这里的缺点是 beforeCreate life-cycle 挂钩中的值将是 undefined。如果你在那里需要它，那么你最好的选择是将默认值设置为你的 i18n 定义的键 (example.prompt.default)，并使用 this.$t(this.prompt) 代替。

Answer 2

您可以从导入它的地方导入 VueI18n 实例。

import i18n from '../i18n'

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

i18ns.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

使用 vue-i18n 翻译 Vue 组件属性的默认值

Using vue-i18n to translate the default value for a Vue component prop

javascript

vue.js

vue-i18n