将包含组件的字符串解析为vue.js中的模板

是否可以将包含组件的字符串解析为vue.js中的模板？字符串示例：

"Some text, some <b>bold text</b>, and inserted image from this 
component <vue-simple-image :src='images/my_image_name.png' />, another text and html tags."

“一些文本、一些粗体文本和从中插入的图像
组件、另一个文本和html标记。“

---

看起来我需要将这些字符串存储到数据库中，以便以后使用它们从vue wysiwyg编辑器重新创建用户输入。

不，这是不可能的，因为vue组件不仅仅是一个html片段，它是一个js类。所以你需要正确地注册它，等等…

从严格意义上说，你问了这个问题，我认为这是不可能的。有一个，可以为您呈现html，但不能呈现组件。这也被认为是一种反模式，如vue指南所述：

在您的网站上动态呈现任意HTML可能非常危险，因为它很容易导致XSS攻击。仅在受信任的内容上使用v-html，而不在用户提供的内容上使用v-html

为了根据用户输入渲染vue组件，可以查看。 您可以解析wysiwyg用户输入，拆分已识别的vue组件标记上的字符串（这样您就有了一个包含常规html序列的元素片段数组，以及作为单个vue组件的元素），然后使用带有v-for循环的模板来呈现此内容。（非工作伪代码）示例：

---

不过，您必须进一步研究这个示例，以考虑vue组件本身内部输入的可能性，例如，如果您正在填充插槽。我会尽量限制您将要支持的输入类型，以使其易于管理。

此“字符串化”组件提供什么类型的功能？可能有一些解决方法。这个问题与我之前的问题有关。你试过这个吗@phuwin，不，我没看到。这可能对你的案子有帮助。干杯@普温。好的，我查一下。非常感谢。听起来不错。你们知道如何从问题中分离出字符串吗？我的意思是我应该使用什么分隔符？您可以在前端或后端使用，这取决于您是否要将输入保存在服务器上以及以何种形式保存。我会从谷歌搜索javascript中的HTML解析开始，必须有相应的库。您可以尝试使用“”字符或正则表达式对标记进行自己的拆分。如何有效地进行拆分是一个独立的问题，你可以为此提出一个新问题。我已经投票支持你的答案。这给了我一些有趣的想法。

<div id="renderedWysiwygInput">
  <div v-for="elem in splitInput">
   <component v-if="stringIsVueComponent(element)" v-bind:is="element"></component>
   <div v-else v-html="element"></div>
  </div>
</div>