在 Vuejs 中的组件上显示翻译答案

【问题标题】：Display translation on a component in Vuejs在 Vuejs 中的组件上显示翻译
【发布时间】：2021-05-21 15:12:02
【问题描述】：

我想在组件的标题上显示翻译。这是 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 上实现此功能？

【问题讨论】：

什么是 {{$t("Total users")}} ？简而言之 $t 是什么
@MohsinAmjad 是 Vue I18n 提供的翻译功能。
是否可以在 this 上下文中访问 $t 作为 this.$t 在您的脚本中？
你的意思是这样说？ user-title="$this.$t("Total users")"

标签： vuejs2 localization vue-i18n

【解决方案1】：

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

sample app

您做错的是 $t 是一个接受变量名称的函数，其中包含实际消息，首先您必须定义一个变量，例如 totalUserTitle: 'Total users' 用于多种语言，就像我在 index.xml 中所做的那样。 js，然后你就可以把它当成$t(totalUserTitle).

【讨论】：

【解决方案2】：

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

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

你实际上已经在多个地方使用了这个语法，这个指令只是告诉 Vue “动态绑定一个或多个属性，或者一个组件 prop 到一个表达式”，这正是你在这里寻找的。

这会将$t('Total users') 评估为表达式，然后将结果作为道具传递给您的组件。

【讨论】：