如何在 vue 3 中将道具作为 HTML 传递给插槽？

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 攻击（不包含任何不安全的用户输入）。
访问 raw HTML documentation 了解更多信息。

如何在 vue 3 中将道具作为 HTML 传递给插槽？

How to pass prop to slot as HTML in vue 3?

vuejs3

vue-slot