Vue3中v-html与:innerHTML注入JSON-LD至script的差异原因

核心差异在于Vue对props绑定和v-html指令的处理逻辑不同： #

• :innerHTML props绑定：当你用:innerHTML给<component :is="'script'">传值时，本质是直接给原生script DOM元素设置innerHTML属性。Vue在这里只是负责把计算后的值传递给元素的对应DOM属性，没有额外的过滤或拦截，所以JSON-LD字符串能被正确插入到script标签中。

• v-html指令：v-html的设计目标是插入HTML内容，但Vue内置了安全过滤机制，会主动过滤掉插入内容中的script标签及其内容——哪怕你是用<component>模拟script元素，v-html的全局规则依然会生效，它不会将内容插入到目标元素中，最终导致script标签为空。

总结 #

如果你需要动态生成JSON-LD的script标签，继续使用:innerHTML绑定的方式即可，它能绕过v-html的安全过滤，直接操作DOM属性完成内容插入。

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