vue.js - 在插槽内转义html

Question

我目前正在开发一个如下所示的组件：

  <pre v-highlightjs>
    <code>
      <slot></slot>
    </code>
  </pre>

所以我遇到的问题是当我在插槽中编写html时，这个html会被渲染，而不是在我的情况下显示为字符串或代码示例。 我用转义<和>测试了它并且它有效。 如何访问插槽内的html并自动转义？

谢谢

编辑：

我对该组件使用highlight.js来突出显示组件内的代码。 highlight.js可以突出显示html。 我放的时候

<html><head></head><body></body></html>

在我的插槽中，显示了该框，但输入呈现为html。 所以我想逃避html-Tags（和其他代码片段），以便显示和突出显示。 希望能更多地说明我的问题。

Answer 1

需要注意的一个重要限制是HTML不是HTML，而是输入到Vue的模板引擎，因此组件在插槽中看到的内容可能与HTML文件中的不完全相同。

编写指令以获取HTML内容并将其替换为该内容的文本版本非常简单。 将它放在组件中也非常简单。 您可以在下面的代码段中看到这些内容。

什么你也将看到的是，Vue的模板引擎剔除标签不应该是内部body ：在html ， head和body标签不使它的组成部分。 如果有的话，他们的内容仍然存在。

如果能够使用这些标签（或者，就此而言，可能是无效的HTML）很重要，那么您将无法在插槽中执行此操作。 您需要将HTML作为数据字符串，您可以使用普通的curlies轻松插入。

 new Vue({ el: '#app', data: { headContent: 'Something in the head' }, components: { htmlEscaper: { template: '#html-escaper', directives: { escapeContent: { bind(el) { const html = el.innerHTML; el.textContent = html; } } } } } });

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <html-escaper> <html> <head> {{ headContent }} </head> <some-junk> Custom tags are ok </some-junk> <body> <div>This part is legit</div> </body> </html> </html-escaper> </div> <template id="html-escaper"> <code v-escape-content> <slot> </slot> </code> </template>

vue.js - 在插槽内转义html

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-01-14 17:44:09

vue.js - 在插槽内转义html

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-01-14 17:44:09

解决方案1
2 已采纳 2018-01-14 17:44:09