2

我有一个警报组件

<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 标签。

我怎样才能做到这一点？

4

1 回答 1

1

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

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

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

于 2021-04-27T09:31:47.337 回答