Fatal编程技术网

Javascript vue.js-槽内转义html

javascript html vue.js

Javascript vue.js-槽内转义html,javascript,html,vue.js,Javascript,Html,Vue.js,我目前正在开发一个如下所示的组件： <pre v-highlightjs> <code> <slot></slot> </code> </pre> 所以我的问题是，当我在插槽中编写html时，这个html被呈现出来，而不是在我的示例中显示为字符串或代码示例。我已经用escape对它进行了测试，它可以正常工作。如何访问插槽中的html并自动转义它 多谢各位 编辑： 我对该组件使用h

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

  <pre v-highlightjs>
    <code>
      <slot></slot>
    </code>
  </pre>
所以我的问题是，当我在插槽中编写html时，这个html被呈现出来，而不是在我的示例中显示为字符串或代码示例。我已经用escape对它进行了测试，它可以正常工作。如何访问插槽中的html并自动转义它

多谢各位

编辑：

我对该组件使用highlight.js来突出显示组件中的代码。js也可以突出显示html。当我把例如

<html><head></head><body></body></html>
在我的插槽中，显示了该框，但输入被呈现为html。所以我想转义html标记（和其他代码片段），以便显示它并突出显示ofc。希望这能进一步说明我的问题。

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

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

您还将看到，Vue模板引擎去掉了不应该在
主体
中的标记：
html
、
头
、和
主体
标记不会进入组件。其内容（如有）将保留

如果能够使用这些标记（或者，就这一点而言，可能是无效的HTML）很重要，那么您将无法在插槽中执行此操作。您需要将HTML作为一个数据字符串，您可以使用普通卷曲轻松地对其进行插值

newvue({
el:“#应用程序”，
数据：{
大脑内容：“大脑中的某些东西”
},
组成部分：{
htmlEscaper：{
模板：“#html转义符”，
指令：{
逃逸内容：{
绑定（el）{
const html=el.innerHTML；
el.textContent=html；
}
}
}
}
}
});


{{headContent}}
自定义标签可以
这部分是合法的
你能举例说明你在插槽中放入了什么、你期望得到什么以及你实际得到了什么吗？谢谢，我试着再详细说明一下我的问题。我们希望看到实际的插槽组件代码。我们需要知道您是否正在执行例如
{{slot\u html}
或
，如果您正在使用组件，那么您是否正在执行例如
。如果不完全理解您的代码是什么样子的，我们就没有一个具体的参考点，也无法缩小您的问题范围。谢谢您，这正是我想要的