vue.js - 在插槽内转义 html答案

【问题标题】：vue.js - escape html inside slotvue.js - 在插槽内转义 html
【发布时间】：2018-01-14 14:18:54
【问题描述】：

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

  <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（和其他代码-sn-ps），以便显示并突出显示它。希望能更详细地说明我的问题。

【问题讨论】：

您能否举例说明您在插槽中放入了什么、您期望得到什么以及实际得到什么？
谢谢，我试着详细说明我的问题
我们想看看实际的插槽组件代码。我们需要知道你是否在做例如<code>{{slot_html}}</code> 或 <code><slot-component></slot-component></code>，如果你正在使用组件，那么如果你正在做例如<some-element v-html="slot_html"></some-element>。如果不确切了解您的代码是什么样的，我们就没有具体的参考点，也无法缩小您的问题范围。

标签： javascript html vue.js

【解决方案1】：

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

编写指令以获取 HTML 内容并将其替换为该内容的文本版本非常简单。将其放入组件中也非常简单。你可以在下面的 sn-p 中看到这些。

您还将看到 Vue 模板引擎去除了不应出现在 body 内的标签：html、head 和 body 标签不会进入组件.它们的内容（如果有的话）会保留下来。

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

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>

【讨论】：

谢谢你就是我要找的东西