vue.js - 传入变量 HTML 的 Vue 插槽

Question

我有一个包含一些 HTML 标记的字符串。

我想将其传递到组件的插槽中。

此组件在开始和结束标记之间使用常规 html 标记的其他地方使用，并且按预期工作。

问题是 mustache 语法输出转义的 HTML，{{myFormattedText}}字面上变成了Some line of <span>text with formatting</span> that is passed in from somewhere else这不是我们想要的。

在 v-html="myFormattedText" 中传递它组件上的属性用变量字符串替换组件标签内的所有内容。

有没有办法做到这一点？出于视觉一致性的原因，我想重用这个组件，但是我们收到的内容是完全不同的，并且根据 View 或源的不同而有很大差异。

测试字符串:

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>

Answer 1

只需将 v-html 渲染放在组件标签内的元素上，它就会正确渲染并传入。

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

再一次，在发布后的片刻，它像一道闪电击中了我......