Comment traduire les attributs/propriétés d'un composant à l'aide de Vue I18n
P粉416996828
P粉416996828 2023-11-07 12:47:10
0
2
674

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é.

P粉416996828
P粉416996828

répondre à tous(2)
P粉447002127

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')" 
/>
P粉447785031

Liez simplement la traduction sans utiliser {{}} :

<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal