如何渲染来自我数据库的 html 字段的 Vue 组件？

Posted 2023-02-23

【中文标题】如何渲染来自我数据库的 html 字段的 Vue 组件？

【英文标题】：How to render Vue component which is coming from an html field of my database?

【发布时间】：2021-05-16 02:52:40

【问题描述】：

承认，我的数据库中有一个“内容”字段，我在其中存储了一个组件以及要显示的数据。 如何渲染这个组件？

我知道 v-html 可以渲染 html，但它不理解组件。

// My data coming from database:
// data.content = "<w-image slug="my-image-slug"></w-image>"

<template>
   <div v-html="data.content"></div> <!-- just show the html output -->
</template>
<script>
import WImage from '@/Components/Widgets/Image.vue'
...
export default 
   props:
        data : Object,
        ...
    ,
    components: 
        WImage,
        ...
    ,

</script>

我猜这是不可能的，因为它没有编译代码。 但是，我通常对这样做的可能性感到惊讶...... 我给它一个机会。

【参考方案1】：

根据您提供的信息，我可以想象一个解决方案，如下所示：

Vue.component("WImage", 
  props: ['slug'],
  template: `
    <div> slug </div>
  `
)

new Vue(
  el: "#app",
  data() 
    return 
      htmlstring: "<w-image slug='my-image-slug'></w-image>"
    
  ,
  render(h) 
    return h(
      template: `<div>$ this.htmlstring </div>`
    )
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

如果您事先知道可能的组件，那么您可以将它们注册/动态导入到处理所有HTML 字符串的组件中。使用render 函数通过将template 传递给它一个组件对象来呈现HTML 字符串。

您需要full build of Vue 来执行此技巧 - 正常构建不会即时编译模板，因此无法正常工作。