Vue3如何从字符串渲染自定义组件？ValidateCheckboxes组件问题

1. 改用结构化数据定义标签内容（优先推荐） #

别把标签写成带组件的HTML字符串，直接用结构化数组/对象来描述每个复选框的标签内容，让Vue可以直接识别并渲染组件：

<template>
  <div class="validate-checkboxes">
    <div v-for="item in checkboxData" :key="item.value">
      <input type="checkbox" :value="item.value" v-model="selectedValues">
      <label>
        <!-- 根据类型渲染对应内容 -->
        <component 
          v-if="item.label.type === 'component'" 
          :is="item.label.component" 
          v-bind="item.label.props" 
        />
        <span v-else>{{ item.label.text }}</span>
      </label>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MyCustomComponent from './MyCustomComponent.vue'

const props = defineProps({
  checkboxData: {
    type: Array,
    required: true,
    // 示例数据格式
    default: () => [
      {
        value: 'option1',
        label: { type: 'text', text: '普通文本选项' }
      },
      {
        value: 'option2',
        label: { 
          type: 'component', 
          component: MyCustomComponent, 
          props: { content: '嵌入自定义组件的选项' } 
        }
      }
    ]
  }
})

const selectedValues = ref([])
</script>

这种方式完全避开字符串解析的坑，Vue能正常管理组件的生命周期，代码也更易维护。

2. 动态编译含组件的HTML字符串 #

如果必须使用HTML字符串格式，需要手动把字符串编译成Vue可识别的渲染函数，注意要使用包含编译器的Vue完整版本：

Vue3 示例 #

<template>
  <div class="validate-checkboxes">
    <div v-for="item in checkboxData" :key="item.value">
      <input type="checkbox" :value="item.value" v-model="selectedValues">
      <label>
        <component :is="compileLabel(item.label)" />
      </label>
    </div>
  </div>
</template>

<script setup>
import { ref, compile } from 'vue'
import MyCustomComponent from './MyCustomComponent.vue'

const props = defineProps({
  checkboxData: {
    type: Array,
    required: true
  }
})

const selectedValues = ref([])

// 编译标签字符串为渲染函数
const compileLabel = (labelStr) => {
  const { render } = compile(`<div>${labelStr}</div>`)
  // 传入组件上下文，确保自定义组件能被识别
  return () => render({ components: { MyCustomComponent } })
}
</script>

注意：Vite项目需要在vite.config.js中配置别名，指定使用带编译器的Vue版本：

export default {
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
}

3. Vue2 适配方案 #

如果是Vue2项目，可以通过Vue.compile和自定义渲染组件实现：

<template>
  <div class="validate-checkboxes">
    <div v-for="item in checkboxData" :key="item.value">
      <input type="checkbox" :value="item.value" v-model="selectedValues">
      <label>
        <render-component :render-fn="getRenderFn(item.label)" />
      </label>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import MyCustomComponent from './MyCustomComponent.vue'

export default {
  components: { MyCustomComponent },
  props: {
    checkboxData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedValues: []
    }
  },
  methods: {
    getRenderFn(labelStr) {
      const compiled = Vue.compile(`<div>${labelStr}</div>`)
      return (h) => compiled.render.call(this, h)
    }
  }
}
</script>

<!-- 自定义渲染组件 -->
<script>
export default {
  props: ['renderFn'],
  render(h) {
    return this.renderFn(h)
  }
}
</script>

关键注意点 #

• v-html只能渲染原生HTML，永远无法识别Vue自定义组件——它只是把字符串直接插入DOM，不会经过Vue的模板编译流程，别再尝试用它解决组件渲染问题。
• 优先选择结构化数据方案，比编译字符串更稳定、更易调试。

内容的提问来源于stack exchange，提问作者matik525