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

Vuejs2 将Vue-i18n单文件组件语法与根消息相结合,vuejs2,vue-i18n,Vuejs2,Vue I18n,我正在试验Vue的优秀插件。它有一个允许我将翻译直接嵌入到需要它们的模板中的功能。但是,如果使用它们,则无法访问根翻译节点。这个模型是受支持的还是我做错了 main.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的优秀插件。它有一个允许我将翻译直接嵌入到需要它们的模板中的功能。但是,如果使用它们,则无法访问根翻译节点。这个模型是受支持的还是我做错了

main.js

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

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

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

{
“en”:{
“标题”:“@:公司名称-yeee hawwww!!!”
}
}

似乎i18n定义是这样的,在组件中,您可以访问父级和子级i18n定义,子级定义覆盖存在任何重叠的父级(例如,如果父级和子级中有
title
键,则将使用子级定义)

但是,您使用的语法显然不起作用。在这种情况下,我想我应该定义一个结合了两个转换值的计算机,并使用它

computed:{
    title(){
        return this.$t("company-name") + this.$t("title")
    }
}
然后在模板中使用计算出的值

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