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

【问题标题】：Vuejs - Slots rendering nonsensical propertiesVuejs - 插槽呈现无意义的属性
【发布时间】：2020-03-01 19:02:35
【问题描述】：

我目前在将原始 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

这是&lbrace;&lbrace; product.title &rbrace;&rbrace; - 删除它，它工作正常。

我是否可以告诉实例停止尝试呈现这些“属性”，因为它们将被解释为纯文本？

问候

【问题讨论】：

您的代码 sn-p 无法阅读。
请改进您的html代码
@LukeSnowden 不管是不是故意的，依然无法阅读。肯定有更好的办法。
好的，只需忘记除&lbrace;&lbrace; product.title &rbrace;&rbrace; 之外的插槽中存在的任何其他内容，因为这是实体格式，如果这有助于您更好地可视化它，这就是导致显示上述错误的原因。它出现在问题中的原因是因为它是我正在处理的确切数据，并让您了解我在做什么。我已经解释了导致问题的原因以及发生的原因，我只想问是否有人知道如何解决它。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

div 似乎没有传递到插槽。

【讨论】：