如何从数据库中解析并渲染Vuetify组件元素？

架构老林

2026-8-20

解决数据库中Vuetify标签无法渲染的问题

首先明确：v-html只能渲染原生HTML标签，没办法解析Vue/Vuetify的自定义组件。它的作用只是把字符串转换成普通DOM节点，不会触发Vue的组件编译流程，所以<v-btn>这类组件标签会被浏览器当成未知标签忽略，只显示里面的文本内容。

要渲染数据库里的Vuetify组件，得让Vue编译这些模板字符串，下面是具体实现方式：

Vue 3 实现方案

创建一个可复用的动态编译组件，用Vue的compile和h函数来处理模板字符串：

<template>
  <component :is="compiledComponent" />
</template>

<script setup>
import { compile, h } from 'vue'

// 接收数据库传来的模板字符串
const props = defineProps({
  template: {
    type: String,
    required: true
  }
})

// 编译模板为可渲染的组件
const compiledComponent = () => {
  const render = compile(props.template)
  return { render }
}
</script>

使用这个组件时，直接传入数据库里的Vuetify模板：

<template>
  <dynamic-template :template="dbTemplate" />
</template>

<script setup>
import DynamicTemplate from './DynamicTemplate.vue'
// 假设dbTemplate是从数据库获取的字符串："<v-btn>Test</v-btn>"
const dbTemplate = '<v-btn>Test</v-btn>'
</script>

Vue 2 实现方案

Vue 2中用Vue.compile来处理模板，写法略有不同：

<template>
  <component :is="compiledComponent" />
</template>

<script>
export default {
  props: {
    template: {
      type: String,
      required: true
    }
  },
  computed: {
    compiledComponent() {
      return Vue.compile(this.template)
    }
  }
}
</script>