在Vuejs中显示组件的翻译

Question

我想显示组件标题的翻译。这是HTML代码：

<user-card
:totalUser="totalUsers"
color="primary"
icon="UserIcon"
user-title="Total users"
/>

在我的user-card组件上，我有这个：

<b-card class="text-center">
<b-avatar
:variant="`light-${color}`"
class="mb-1"
size="45"
>
<feather-icon
:icon="icon"
size="21"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ totalUser}}
</h2>
<span>{{ user-title }}</span>
</div>
</b-card>

为了使用翻译，我有这样的语法，从JSON文件中获得翻译后的术语：

{{$t("Total users")}}

如何在user-title上实现此功能？

Answer 1

看看这个，我已经尝试在代码沙箱中复制您的场景。

示例应用

你做错的是$t是一个接受变量名的函数，变量名中有一条实际消息，首先你必须像我在index.js中那样为多种语言定义一个变量，例如totalUserTitle："Total users"，然后你可以将其用作$t(totalUserTitle)。

Answer 2

只需使用v-bind并将表达式直接传递给user-card组件：

<user-card
...
:user-title="$t('Total users')"
/>

实际上，您已经在多个地方使用了这种语法，该指令只是告诉Vue"；将一个或多个属性或组件道具动态绑定到表达式"；，这正是你想要的。

这将把$t('Total users')作为表达式进行求值，然后把结果作为道具传递给组件。