如何为vue-i18n插值参数应用样式？slot传参失效求助

我在使用vue-i18n为应用做国际化时，想给特定插值参数添加样式，比如让名字显示为粗体，目标效果是：Hello <strong>Bob</strong>, welcome back!。

原本的非国际化代码是：

<h1>Hello <span class="name_lbl">{{name}}</span>, welcome back!</h1>

用vue-i18n的基础写法是：

<h1>{{ $t("hello_message", { name: "Bob" }) }}</h1>

但这种写法没法给name参数加样式，后来尝试用组件插槽写法，但插值参数没有被填充：

<i18n v-t="'home.hello_message'" tag="h2">
   <template v-slot:name>
     <span id="myClass">{{ name }}</span>
   </template>
</i18n>

对应的消息配置：

{
  "home": {
    "hello_message": "Hello {name}, welcome back!"
  }
}

结果只显示Hello , welcome back!，单独打印{{name}}是正常的，而且用path属性时完全无效。

一、组件式插槽写法（安全推荐） #

问题出在你用了v-t指令——这个指令只支持纯文本插值，不能和插槽配合使用。正确的做法是用组件的path属性结合插槽实现带样式的参数替换：

模板代码 #

<vue-i18n path="home.hello_message" tag="h2">
  <template v-slot:name>
    <span class="name_lbl">{{ name }}</span>
  </template>
</vue-i18n>

消息配置（保持不变） #

{
  "home": {
    "hello_message": "Hello {name}, welcome back!"
  }
}

关键说明：

• <vue-i18n>组件的path属性用来指定国际化消息的键名
• tag属性设置渲染后的HTML标签（这里是<h2>）
• 插槽名v-slot:name必须和消息里的{name}参数完全对应，插槽内可以自定义任意HTML结构和样式

如果你的项目里组件标签是<i18n>而非<vue-i18n>，请检查vue-i18n的全局注册是否正确：

// Vue2 示例
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// Vue3 示例
import { createI18n } from 'vue-i18n'
const i18n = createI18n({ /* 你的配置 */ })
app.use(i18n)

二、v-html结合$t写法（需注意XSS风险） #

如果不想用组件式写法，也可以通过v-html渲染包含HTML标签的国际化消息，但必须确保插值参数是可信内容（比如不是用户输入的内容，避免XSS攻击）：

修改消息配置 #

{
  "home": {
    "hello_message": "Hello <strong>{name}</strong>, welcome back!"
  }
}

模板代码 #

<h2 v-html="$t('home.hello_message', { name: name })"></h2>

警告：如果name变量来自用户输入，这种写法可能引入XSS风险，因此优先选择组件式插槽方案。

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