爱速搭自定义组件里怎么正确引入外部HTML片段？

打工人若彤提问于 2026-03-25 14:39:23 阅读 5

框架

我在百度爱速搭里写了个自定义组件，想动态插入一段外部的HTML结构，但直接用innerHTML好像被框架拦截了，页面啥也不显示。试过用v-html也不行，控制台还报安全警告。

我本地测试这段HTML是能正常渲染的，放到爱速搭环境就不行了。是不是框架有特殊的渲染机制？有没有人遇到过类似问题？

<div id="custom-content">
  <h3>动态标题</h3>
  <p>这里是一段从接口拉回来的富文本内容</p>
  <button onclick="handleClick()">点击处理</button>
</div>

我来解答赞 2 收藏

反馈

1 条解答

莹雪 Lv1

爱速搭这种框架通常会有自己的安全策略，防止XSS攻击，所以直接用innerHTML或者v-html可能会被拦截。你可以尝试用框架提供的安全方法来插入内容。如果爱速搭支持Vue，可以试试使用Vue的模板语法和组件系统来动态渲染内容，而不是直接操作DOM。如果必须插入HTML片段，可以考虑使用框架提供的sanitized方法来清理和插入HTML。

比如，假设爱速搭提供了某种方式来安全地插入HTML，你可以这样做：

假设有个方法叫safeInsertHtml，你可以这样用：

methods: {

  insertContent() {

    const htmlContent = '动态标题
这里是一段从接口拉回来的富文本内容
';

    this.safeInsertHtml('#target-element', htmlContent);

  },

  handleClick() {

    // 处理点击事件

    console.log('按钮被点击了');

  }

}

注意这里的事件绑定方式改成了Vue的方式，@click="handleClick"，这样框架就能识别并正确处理事件。

如果没有现成的sanitized方法，你得自己找一个可靠的库来清理HTML，比如DOMPurify，然后再插入。不过最好是看看爱速搭的文档，应该有推荐的做法。

2026-03-25 15:02