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

2024-05-07 • 问答

我目前在将原始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 }}的原因-删除它即可正常工作。

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

致谢

如上所述，您可以使用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。

对于其他需要帮助的人，只需使用<div v-pre>;将要包装的内容包装到插槽中即可。

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

div似乎没有传递到插槽。