在 v-html 中显示和渲染 Vue 组件

Question

所以我将我的帖子的 HTML 存储在我的数据库中（作为下面的示例内容） 在我的帖子页面上，您可以查看数据我有一个简单的

<span v-html="content"></span>

我想问一下，当从数据库中获取 Vue 组件作为示例或一般的 v-html 时，如何使 Vue 组件在 HTML 中工作。

如果 v-html 不是我经常在不同来源上阅读的方法，那么这里最好的用例是什么？

<div v-swiper:mySwiper="">
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-wrapper">
   <div class="swiper-slide"><img src="v8.jpg"></div> 
   <div class="swiper-slide"><img src="v7.jpg"></div>
   <div class="swiper-slide"><img src=v6.jpg"></div>
  </div>
<div class="swiper-pagination"></div> 
</div>

Answer 1

我不会这么早掉毛巾的。看看https://github.com/alexjoverm/v-runtime-template

这可能对您的用例有用，因为通常担心这些方法对恶意注入的安全性。

但是，从长远来看，我会寻找不同的解决方案，例如在您的所见即所得编辑器中嵌入一些特殊标签，并在呈现内容时将这些标签替换为真实组件（可能使用动态组件https://vuejs.org/v2/guide/components-dynamic-async.html）。