Vue 3渲染函数：如何注入` `作为原生HTML节点

不用依赖innerHTML，Vue里有更直接的方式插入 （非换行空格），推荐两种方案：

• 直接插入Unicode字符： 对应的Unicode值是\u00A0，可以直接作为文本节点插入到两个span之间，不需要额外的span标签，代码更简洁。
• 用text属性赋值：如果一定要用span包裹空格，直接给元素的text属性赋值\u00A0，比innerHTML更安全，避免XSS风险。

修改后的示例代码：

export default function Price({ price, currency }, { slots }) {
    return h('div', { class: 'price_flex price_flex_bold' }, [
        h('span', { style: 'text-transform: none;' }, slots.default?.()),
        '\u00A0', // 直接插入非换行空格，替代原来的span+innerHTML
        h('span', { style: 'width: auto' }, formatter.format(price)),
        ' ',
        h('i', currencies[currency])
    ]);
}

如果需要用span包裹空格，也可以这么写：

h('span', {}, '\u00A0')

这种方式完全符合Vue的渲染逻辑，不需要借助原生HTML解析，既安全又简洁。

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