如何让Vue 3渲染函数h()正确渲染输出HTML内容

h函数默认会将字符串类型的子节点转义为纯文本渲染，不会解析字符串内的HTML标签，这是Vue内置的XSS防护机制，因此你传入的<strong>Bold</strong>会被直接作为文本输出，不会生成对应的DOM元素。

方案1：嵌套调用h函数（官方首选方案） #

不需要拼接HTML字符串，直接嵌套h函数描述DOM结构即可，性能最优且天然规避XSS风险：

import { h } from 'vue'

// 渲染结果等价于 <span><strong>Bold</strong></span>
h('span', {}, [
  h('strong', {}, 'Bold')
])

方案2：使用innerHTML属性渲染HTML字符串 #

如果你的内容是无法拆分的现成HTML字符串（例如后端返回的富文本内容），可以通过配置节点的innerHTML属性实现渲染，效果和模板中的v-html指令一致：

import { h } from 'vue'

h('span', {
  innerHTML: '<strong>Bold</strong>'
})

安全提示：innerHTML会无差别解析传入的所有HTML代码，如果内容包含用户可控的输入，必须先做XSS安全过滤，避免恶意脚本注入导致安全问题。

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