首页  >  问答  >  正文

使用Vue I18n翻译组件属性/属性的方法

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


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

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


然后在另一个页面/组件中使用my-card组件,如下所示


  

  <template>
      <div>

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


如何使用vue I18n来翻译组件的属性?


  

  <template>
      <div>

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


我似乎无法使传入的属性翻译起作用。

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

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

P粉416996828P粉416996828346 天前600

全部回复(2)我来回复

  • P粉447002127

    P粉4470021272023-11-08 10:25:35

    您可以在组件属性中使用I18n翻译,如下所示。

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

    回复
    0
  • P粉447785031

    P粉4477850312023-11-08 00:23:32

    只需绑定翻译,而不使用{{}}

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

    回复
    0
  • 取消回复