vuejs2 - Combining Vue-i18n Single File Component syntax with root messages

Question

I'm experimenting with the excellent vue-i18n plugin for Vue. It has a neat feature that allows me to embed translations directly into the template that needs them. However if I use them, I'm unable to access the root translation node. Is this model supported or am I just doing it wrong?

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>

Answer 1

i18n 定义似乎合并在一起，因此，在组件中，您可以访问父 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>