Comment traduire les attributs/propriétés d'un composant à l'aide de Vue I18n

Question

Comment traduire les propriétés/propriétés entrantes d'un composant ? Par exemple, j'ai un composant de carte avec des propriétés de titre et de description définies.

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

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

Ensuite, utilisez le composant my-card dans une autre page/un autre composant comme ci-dessous

  

  <template>
      <div>

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

Comment utiliser la vue I18n pour traduire les propriétés des composants ?

  

  <template>
      <div>

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

Je n'arrive pas à faire fonctionner la traduction des attributs entrants.

P.S. Je sais que je peux ajouter des traductions où le composant my-card est défini, mais le problème ici est que le composant est un composant tiers de la bibliothèque NPM.

Je sais que certains packages de React.js ont cette fonctionnalité.

Answer 1

Vous pouvez utiliser la traduction I18n dans les propriétés des composants comme indiqué ci-dessous.

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

Answer 2

Liez simplement la traduction sans utiliser {{}} :

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