Используйте основанные на компонентах переводы в дочерних компонентах в vue-i18n - PullRequest
Новая
       15

Используйте основанные на компонентах переводы в дочерних компонентах в vue-i18n

0 голосов
/ 28 марта 2019

Я использую vue-i18n для перевода сообщений в моем приложении vue. У меня есть несколько глобальных переводов, которые добавляются в new VueI18n(...), а также некоторые переводы на основе компонентов в компоненте с именем c-parent. Компонент содержит дочерние компоненты с именем c-child. Теперь я хотел бы использовать компонентные переводы c-parent также в c-child.

Я сделал небольшой пример в этой скрипке: https://jsfiddle.net/d80o7mpL/

Проблема в последней строке вывода: сообщение в c-child не переведено с использованием компонентных переводов c-parent.

Поскольку глобальные переводы «наследуются» всеми компонентами, я ожидаю того же для трансляций на основе компонентов (в их соответствующем поддереве компонентов). Есть ли способ добиться этого в vue-i18n?

1 Ответ

1 голос
/ 28 марта 2019

Что ж, вам нужно передать текст дочернему компоненту с помощью реквизита.

Глобальные переводы "наследуются" всеми компонентами.Но вы используете местный перевод на ребенка. 

const globalMessages = {
  en: { global: { title: 'Vue i18n: usage of component based translations' } }
}

const componentLocalMessages = {
	en: { local: {
    title: "I\'m a translated title",
    text: "I\'m a translated text"
  }}
}

Vue.component('c-parent', {
	i18n: {
  	messages: componentLocalMessages
  },
	template: `
    <div>
      <div>c-parent component based translation: {{ $t('local.title') }}</div>
      <c-child :text="$t('local.title')"></c-child>
    </div>
  `
})

Vue.component('c-child', {
  props: ['text'],
	template: `
		<div>c-child translation: {{ text }}</div>
	`
})

Vue.component('app', {
	template: '<c-parent />'
})

const i18n = new VueI18n({
	locale: 'en',
  messages: globalMessages
})

new Vue({
  i18n,
  el: "#app",
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

h5 {
  margin: 1em 0 .5em 0;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-i18n"></script>

<div id="app">
  <h2>{{ $t('global.title') }}</h2>
  We define two Vue components: <code>&lt;c-child/&gt;</code> contained in <code>&lt;c-parent/&gt;</code>.
  <code>&lt;c-parent/&gt;</code> defines some component based translations. We would like to use the
  parent's translations in the child but it does not work.
  
  <h5>Example:</h5>
  <app />
</div>
...