我有一个包含一些HTML标记的字符串。
我想将此传递到组件的插槽中。
该组件在其他地方使用,在开始和结束标记之间带有常规html标记,并且可以正常工作。
问题在于,小胡子语法输出转义为HTML,{{myFormattedText}}
实际上变成了Some line of <span>text with formatting</span> that is passed in from somewhere else
,这不是我们想要的。
在组件的v-html="myFormattedText"
属性中传递它会用变量字符串替换组件标签内的所有内容。
有没有办法做到这一点?出于视觉一致性的原因,我想重用此组件,但是我们收到的内容是完全不同的,并且根据视图或源的不同而有很大差异。
测试字符串:
myFormattedText = "Some line of <span>text with formatting</span> that is passed in from somewhere else";
组件:
<template>
<div class="doing-a-thing">
<h2>Some text</h2>
<div class="thing">Random stuff</div>
<slot></slot>
</div>
</template>
尝试:
<mycomponent>{{myFormattedText}}</mycomponent>
<mycomponent v-html="myFormattedText"></mycomponent>
答案 0 :(得分:0)
只需将v-html渲染放置在component标签内的元素上,即可正确渲染并传入。
<mycomponent><div v-html="myFormattedText"></div></mycomponent>
同样,发布后的片刻,它像闪电般击中我……