使用Vue I18n翻譯組件屬性/屬性的方法
P粉416996828
P粉416996828 2023-11-07 12:47:10
0
2
669

如何翻譯元件的傳入屬性/屬性?例如,我有一個卡片組件,其中定義了標題和描述屬性。


#
<!-- 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粉416996828
P粉416996828

全部回覆(2)
P粉447002127

您可以在元件屬性中使用I18n翻譯,如下所示。

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

只需綁定翻譯,而不使用{{}}

<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板