Vue插值表达式中能否强制编译并渲染自定义组件？

首先得明确：Vue的{{ }}插值语法只能渲染文本、简单表达式或返回字符串的计算属性，没办法直接在里面插入Vue自定义组件标签——这是Vue的设计限制，因为插值的核心作用就是输出文本内容。针对你遇到的第三方组件用<legend>+插值的场景，给你几个可行的解决方案：

方案1：优先检查第三方组件是否支持插槽（最推荐） #

很多UI组件库的表单类组件（尤其是带<legend>的fieldset组件）都会预留插槽来自定义标题内容，而不是只支持文本插值。你可以去翻下这个第三方组件的文档，找找有没有类似legend、title之类的插槽。如果有的话，直接用插槽替代插值就行，比如：

<template>
  <div class="row">
    <!-- 假设第三方组件叫FieldSet，它有legend插槽 -->
    <FieldSet>
      <template #legend>
        <!-- 这里直接放你的自定义组件 -->
        <MyCustomComponent />
      </template>
      <!-- 组件其他内容 -->
    </FieldSet>
  </div>
</template>

这种方式最符合Vue的组件化思想，能完整保留自定义组件的交互逻辑和生命周期。

方案2：用Vue的渲染函数手动挂载组件（适合无插槽的情况） #

如果第三方组件完全没有插槽，只能通过插值传递文本，那可以通过手动渲染组件到<legend>元素中的方式实现：

1. 先给<legend>加一个ref，方便获取DOM元素：

<template>
  <div class="row">
    <legend ref="legendRef"></legend>
    <!-- 第三方组件的其他内容 -->
  </div>
</template>

2. 在组件的mounted钩子中，用Vue的h函数（渲染函数）创建自定义组件，并挂载到<legend>元素上：

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

const legendRef = ref(null)

onMounted(() => {
  if (legendRef.value) {
    // 创建组件虚拟节点
    const vnode = h(MyCustomComponent, {
      // 这里可以传递自定义组件需要的props
      title: '自定义标题'
    })
    // 挂载组件到legend元素中
    import('vue').then(({ createApp }) => {
      createApp(vnode).mount(legendRef.value)
    })
  }
})
</script>

注意：这种方式相当于在当前组件内部创建了一个独立的Vue应用实例，要是需要组件间通信，记得在h函数里传递好props或者用其他通信方式。

方案3：用v-html渲染静态HTML（不推荐，仅静态内容可用） #

如果你的自定义组件只是静态展示，没有任何交互逻辑，那可以把组件编译成HTML字符串，然后用v-html指令渲染到<legend>中。但这种方式有两个明显的问题：

• 会丢失所有Vue组件的生命周期和交互能力，因为v-html只是把字符串解析成静态DOM，不会触发Vue的组件挂载。
• 存在XSS安全风险，如果HTML字符串包含用户输入，容易被注入恶意代码。

示例代码（仅作参考）：

<template>
  <div class="row">
    <legend v-html="customComponentHtml"></legend>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const customComponentHtml = computed(() => {
  // 这里是自定义组件编译后的静态HTML字符串
  return '<div class="custom-title">我是静态自定义内容</div>'
})
</script>

总结一下，优先用插槽方案，如果没有插槽再考虑手动挂载组件的方式，尽量避免用v-html。

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