Question

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

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

所以我遇到的问题是，当我在插槽中编写html时，这个html会被渲染，而不是在我的情况下显示为字符串或代码示例。我已经使用转义＆lt;测试了它和＆gt;它的工作原理。如何访问插槽中的html并自动将其转义？

谢谢

编辑：

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

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

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

Answer 1

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

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

您还会看到，Vue模板引擎会删除不应该位于body内的标记：html，head和{{1}标签不会使它成为组件。他们的内容（如果有的话）仍然存在。

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

＆＃13;

body

＆＃13;

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;
          }
        }
      }
    }
  }
});

＆＃13;

vue.js - 在插槽

1 个答案: