如何呈现来自我数据库的html字段的Vue组件？
如何呈现来自我数据库的html字段的Vue组件？
提问于 2021-02-12 02:47:43
让我承认，我的数据库中有一个字段“内容”，我存储一个组件，并显示它的数据。如何呈现此组件？
我知道v可以呈现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
Stack Overflow用户
回答已采纳
发布于 2021-02-13 13:08:20
根据您提供的信息，我可以想象出一个解决方案，比如：
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字符串。
您需要Vue的全面构建来完成这个任务--正常的构建不会动态编译模板，因此它将无法工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66170422
复制相关文章
![telnet不是内部或外部命令怎么办[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/02fad6722e5e8b2832a4286fab403ef6.png)
![[1200]yarn不是内部或外部命令，也不是可运行的程序](https://developer.qcloudimg.com/http-save/yehe-4908043/7583009d29475938126d757ea353efc9.png)
相似问题
通过分支google云平台过滤构建步骤
GCP云构建可选步骤
如何将Google Drive下载输出流保存为文件？
Google构建条件步骤
找不到工件-云构建器步骤失败(Google cloud Builder)
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
