vue.js - 如何在组件属性/property中使用Vue I18n翻译

Question

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

<!-- 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 来翻译组件 Prop ？

  

  <template>
      <div>

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

我似乎无法让翻译与传入的 Prop 一起工作。

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

我知道 React.js 中的某些包具有此功能。

Answer 1

无需使用 {{}} 即可绑定(bind)翻译:

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