如何在组件属性/属性中使用 Vue I18n 翻译答案

【问题标题】：How to use Vue I18n translation in component attribute/property如何在组件属性/属性中使用 Vue I18n 翻译
【发布时间】：2021-03-05 04:20:57
【问题描述】：

如何翻译传入的组件属性/属性？例如，我有一个卡片组件，其标题和描述属性定义如下。

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

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

然后像这样在另一个页面/组件中使用 my-card 组件

  

  <template>
      <div>

        <header>Page header</header>
        <my-card :title="the best card title" :description="the best description" />
        <footer>Page footer</footer>
      </div>
    </template>

如何使用 vue I18n 翻译组件道具？

  

  <template>
      <div>

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

我似乎无法使用传入的道具进行翻译。

PS：我知道我可以在我定义 my-card 组件的地方添加翻译，但这里的问题是这些组件是来自 NPM 库的第三方组件。

我知道 React.js 中的一些包有这个功能。

【问题讨论】：

标签： vue.js nuxt.js vue-i18n

【解决方案1】：

只绑定翻译不使用{{}}：

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

【讨论】：