评估用 v-html 注入的 HTML

Question

当 HTML 包含需要评估的 Vue 标记时，如何使用 Vue 注入原始 HTML？

例如，当它来自一个变量时，它可以用于呈现 HTML：

<p v-html="markup"></p>

{
    computed: {
        markup() {
            return 'Hello <em>World</em>!';
        },
    },
}

这会很好地工作，但是如果markup计算属性还包含一个自定义 Vue 组件呢？

return 'Hello <em>World</em>! My name is <my-name></my-name>!';

在这种情况下<my-name></my-name>将不会被评估，而是按原样呈现。

我该如何让它“Vue-fied”以及在这种情况下范围如何工作？

Answer 1

我彻底阅读了文档，结果发现它实际上不可能“开箱即用”，因为它在某种程度上是一种反模式。

然而，我试图解决的问题需要它，因为我希望能够在翻译文本的任意位置注入自定义组件。

我最终使用了自定义指令。

这里唯一的限制是，如果你想传递一个属性，从你包含指令的上下文中说name ，你必须通过$parent引用它。

return 'Hello <em>World</em>! My name is <my-name :name="$parent.name"></my-name>!';

用法将是：

<p v-markup="markup"></p>

渲染时，上述内容与执行此操作相同：

<p>
    Hello <em>World</em>! My name is <my-name :name="name"></my-name>!
</p>