传入了可变HTML的Vue插槽

时间:2019-07-01 18:06:46

标签: vue.js vuejs2 vue-component

我有一个包含一些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>

1 个答案:

答案 0 :(得分:0)

只需将v-html渲染放置在component标签内的元素上,即可正确渲染并传入。

<mycomponent><div v-html="myFormattedText"></div></mycomponent>

同样,发布后的片刻,它像闪电般击中我……