Question

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

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

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

使用VueI18n转换道具的this.$t值的最佳方法是什么？

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

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组件prop的默认值

2 个答案: