Cara menterjemah atribut/sifat komponen menggunakan Vue I18n

Question

Bagaimana untuk menterjemah sifat/sifat masuk komponen? Sebagai contoh, saya mempunyai komponen kad dengan sifat tajuk dan perihalan yang ditakrifkan.

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

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

Kemudian gunakan komponen kad saya di halaman/komponen lain seperti di bawah

  

  <template>
      <div>

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

Bagaimana untuk menggunakan vue I18n untuk menterjemah sifat komponen?

  

  <template>
      <div>

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

Saya nampaknya tidak dapat memastikan terjemahan atribut masuk berfungsi.

P.S. Saya tahu saya boleh menambah terjemahan di mana komponen kad saya ditakrifkan, tetapi masalahnya di sini ialah komponen itu adalah komponen pihak ketiga daripada pustaka NPM.

Saya tahu beberapa pakej dalam React.js mempunyai fungsi ini.

Answer 1

Anda boleh menggunakan terjemahan I18n dalam sifat komponen seperti yang ditunjukkan di bawah.

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

Answer 2

Hanya ikat terjemahan tanpa menggunakan {{}}:

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