vue.js - Vuejs - 插槽呈现无意义的属性

Question

我目前在将原始 HTML（实体表单）传递到语法高亮的插槽时遇到问题。

想象一下有这样一个插槽；

<template v-slot:code-snippet>&lbrace;&lbrace; product.title &rbrace;&rbrace;</template>

我收到错误

[Vue warn]: Property or method 'product' is not defined on the instance but referenced during render

这归结为{{ product.title }}- 删除它并且它工作正常。

无论如何我可以告诉实例停止尝试呈现这些“属性”，因为它会被解释为纯文本？

问候

score 1 · Accepted Answer

如前所述，您可以使用v-pre. 我会说这是正确的答案，但值得注意的是，还有其他方法可以做到这一点。也许如果存在其他限制，这些可能是有用的。

黑客 1：

将麻烦的字符串移动到一个data属性：

<template v-slot:code-snippet>{{ code }}</template>

data () {
  return {
    code: '{{ product.title }}'
  }
}

黑客 2：

将所有内容包装在一个插值中并加入一些 JS 字符串转义：

<template v-slot:code-snippet>{{ '\u007b\u007b product.title \u007d\u007d' }}</template>

根据具体情况，这也可以适用于v-text或v-html酌情进行调整。

score 0 · Accepted Answer

对于其他需要帮助的人，只需使用 ; 将进入插槽的内容包装起来<div v-pre>。

<template v-slot:code-snippet><div v-pre>{{ $component->renderCode() }}</div></template>

div 似乎没有传递到插槽。

2 回答 2