vuejs2 - 将 Vue-i18n 单文件组件语法与根消息相结合

Question

我正在试验优秀的 vue-i18n Vue 的插件。它有一个 neat feature这允许我将翻译直接嵌入到需要它们的模板中。但是，如果我使用它们，我将无法访问根翻译节点。这个模型是否受支持，还是我只是做错了？

ma​​in.js

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      'company-name': 'billy-bob\'s fine steaks.'
    }
  }
});

示例.vue

<i18n>
  {
    "en": {
      "title": "@:company-name - yeee hawwww!!!"
    }
  }
</i18n>

<template>
  <div id="app" class="container">
    <site-header :title="$t('title')"></site-header>
  </div>
</template>

Answer 1

看起来 i18n 定义是 merged together这样，在组件中，您将可以访问父项和子项 i18n 定义，子项定义覆盖父项，其中有任何重叠(例如，如果您有一个 title 键 parent 和 child ， child 的将被使用)。

但是您使用的语法显然不起作用。在这种情况下，我想我会定义一个组合两个转换值的计算值并使用它。

computed:{
    title(){
        return this.$t("company-name") + this.$t("title")
    }
}

然后只需在模板中使用计算值即可。

<template>
  <div id="app" class="container">
    <site-header :title="title"></site-header>
  </div>
</template>