在 html 中转义 vue 组件

Question

我正在努力用 component / HTML example 对制作 table。

这是我所做的示例（它不起作用）：

<td>
    <vm-three-state-checkbox-filter 
        name="three-checkbox"
    ></vm-three-state-checkbox-filter>
</td>
<td v-pre>
    <pre>
        <vm-three-state-checkbox-filter 
            name="three-checkbox"
        ></vm-three-state-checkbox-filter>
    </pre>
</td>

结果如下：在左边你可以看到渲染的组件，在右边我期望看到原始 html 而不是我看到的虚无。

我可以在 data 中将转义的 HTML 指定为字符串，这会起作用（vue 默认转义字符串），但我更愿意在模板中进行。

提前感谢您的帮助。

Answer 1

v-pre 指令阻止 Vue 编译该元素内的任何内容。

所以您的 <vm-three-state-checkbox-filter> 元素保留在浏览器中，就像在模板中一样，因为它不是有效的 HTML 元素，浏览器显示：无。

v-pre 不会为您 HTML-转义任何内容。它只会阻止 Vue 编译 Vue 模板代码的东西——组件、指令、胡须 {{}} 标签。

您可能会编写一个小的自定义指令（启用 terminal: true option），将内部的 HTML 元素转换为转义字符串，但这不是我能做的就地拼凑。

Answer 2

HTML 代码没有使用标签转义。

在 html 中转义 vue 组件

Escape vue components in html

vue.js