Vue 2中能否在v-html指令内返回组件？

云上老周

2026-8-13

Vue 2中v-html无法渲染组件的原因及解决办法

不行，v-html指令没办法直接渲染Vue组件，你遇到的情况是正常的。

v-html的核心作用是把字符串解析成普通DOM元素插入页面，但它完全不会触发Vue的组件编译流程。你返回的<b-icon icon="star-fill"></b-icon>会被当成普通的HTML标签处理，Vue不会把它识别成注册过的组件，自然不会渲染出对应的图标。

如果要动态渲染组件，推荐这几种方式：

用动态组件语法
这是最直接的方式，利用Vue内置的<component>标签动态渲染组件。如果b-icon是全局注册的组件，直接这么写就行：
```
<component :is="'b-icon'" :icon="'star-fill'"></component>
```
要是需要根据条件切换组件，只需要修改:is绑定的值就行。
使用渲染函数
如果需要在计算属性里动态生成组件结构，可以用Vue的渲染函数返回VNode：
```
computed: {
  starIcon() {
    return this.$createElement('b-icon', {
      props: { icon: 'star-fill' }
    })
  }
}
```
然后在模板里直接使用这个计算属性：
```
<div>{{ starIcon }}</div>
```
封装混合内容为组件
如果你的场景需要同时渲染普通HTML和组件，最好把这部分内容封装成一个单独的Vue组件，在组件内部分别处理HTML（用v-html处理普通部分）和组件渲染，然后在父组件里直接引用这个封装好的组件即可。