So übersetzen Sie Komponentenattribute/-eigenschaften mit Vue I18n

Question

Wie übersetze ich eingehende Eigenschaften/Eigenschaften einer Komponente? Ich habe beispielsweise eine Kartenkomponente mit definierten Titel- und Beschreibungseigenschaften.

<!-- my-card  组件 -->
    <template>
      <div>
        <h2>{{title}}</h2>
        <span>{{description}}</span>
      </div>
    </template>

    <script>
      export default {
        props: {
          title: String,
          descritpion: String
        }
      }
    </script>

Dann verwenden Sie die My-Card-Komponente auf einer anderen Seite/Komponente wie unten

  

  <template>
      <div>

        <header>页面头部</header>
        <my-card :title="最好的卡片标题" :description="最好的描述" />
        <footer>页面底部</footer>
      </div>
    </template>

Wie verwende ich Vue I18n zum Übersetzen von Komponenteneigenschaften?

  

  <template>
      <div>

        <header>页面头部</header>
        <my-card :title="{{ $t('myCard.title')}}" :description="{{$t('myCard.description')}}" />
        <footer>页面底部</footer>
      </div>
    </template>

Ich kriege die Übersetzung der eingehenden Attribute anscheinend nicht hin.

P.S. Ich weiß, dass ich Übersetzungen hinzufügen kann, wenn die My-Card-Komponente definiert ist, aber das Problem hierbei ist, dass die Komponente eine Drittanbieterkomponente aus der NPM-Bibliothek ist.

Ich weiß, dass einige Pakete in React.js über diese Funktionalität verfügen.

Answer 1

您可以在组件属性中使用I18n翻译，如下所示。

<my-card 
:title="$t('myCard.title')"
:description="$t('myCard.description')" 
/>

Answer 2

只需绑定翻译，而不使用{{}}：

<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />