如何向Vue.js i18n的<i18n-t>标签传递参数？

你可以通过两种方式给<i18n-t>组件传递参数，完全兼容你需要的scope="parent"场景：

1. 使用args Prop（与v-t语法一致） #

直接通过:args绑定参数对象或数组，和你用v-t时的args用法相同：

对象参数（对应翻译文本中的命名占位符） #

<i18n-t :keypath="title" scope="parent" :args="{ param1: 'value' }">
</i18n-t>

数组参数（对应翻译文本中的索引占位符） #

<i18n-t :keypath="title" scope="parent" :args="['value1', 'value2']">
</i18n-t>

2. 使用插槽传递参数（更灵活） #

如果需要插入HTML内容或者动态组件，用插槽更合适，占位符名称对应插槽名：

命名插槽（对应命名占位符） #

假设翻译文本是"Hello {name}"：

<i18n-t :keypath="title" scope="parent">
  <template #name>
    {{ userName }}
  </template>
</i18n-t>

匿名插槽（对应索引占位符） #

假设翻译文本是"Hello {0}, welcome to {1}"：

<i18n-t :keypath="title" scope="parent">
  <template #0>{{ userName }}</template>
  <template #1>{{ appName }}</template>
</i18n-t>

两种方式都能正常访问父作用域的翻译内容，因为scope="parent"只是指定了翻译资源的查找范围，不影响参数传递逻辑。

内容的提问来源于stack exchange，提问作者Esteban