如何在 vue 3 中将 prop 作为 HTML 传递给 slot？

Question

我有一个警报组件

<template>
  <div class="notification is-light" :class="type" :style="cssProps">
  <button @click="emitClose" class="delete"></button>
    <slot></slot>
</div>
</template>

我希望能够通过插槽将 HTML 传递到其中，以便我可以准确定义警报的外观，例如

<Alert v-if="showError" @close="showError = false" maxWidth="600px">
   <span>The next words <b>are bold</b> because of the b tag</span>
 </Alert>

我传递到槽的文本呈现为 HTML，并且标签按预期工作。

但是，我想要传递警报的文本将根据 API 的响应动态生成，因此我尝试执行以下操作

//somewhere in my component javascript
this.error = '<span>Error connecting to your account. Try <b>closing this window</b></span>'

然后我按如下方式调用该组件

<Alert>{{error}}</Alert>

这将呈现纯文本，包括 html 标签，而不是像第一个示例中那样呈现 html 标签。

我怎样才能实现这个目标？

Answer 1

看来你需要使用v-html指令来避免 HTML 转义。尝试

<Alert><span v-html="error"></span></Alert>

确保内容不受 XSS 影响（不包含任何不安全的用户输入）。
请访问原始 HTML 文档以获取更多信息。