如何翻譯元件的傳入屬性/屬性?例如,我有一個卡片組件,其中定義了標題和描述屬性。
<!-- 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粉4470021272023-11-08 10:25:35
您可以在元件屬性中使用I18n翻譯,如下所示。
<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />
P粉4477850312023-11-08 00:23:32
只需綁定翻譯,而不使用{{}}
:
<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />