问题 #3292💬 已回答提出于 2021年2月26日作者 sudiptochoudhury1 个反应

每个组件在保存前有没有一个事件，组件可以监听？

快速解答作者 Ju99ernaut❤ 1

我不确定每个组件是否都有这样的钩子，但你可以尝试利用组件的“toHtml”属性。这个问题已经在别处讨论过了，所以你可以在期刊中搜索，因为有不少。

问题

非常感谢你提供这个图书馆。背景：我正在构建一个编辑器，打算从我之前开发并在应用中使用的现有Vuejs组件中定义大部分组件。这些组件大多基于UI的简单和复杂组件。例如，我有简单的vuejs组件，分别叫su-form、su-field、su-label、su-input、su-radios、su-buttons、su-validations;复杂的vuejs组件则使用su-login-form、su-registration-form等简单组件。正如你可能猜到的，su-form或su-field等组件都有插槽，我会添加其他组件，以创建符合业务场景的实用组件。例如，我在su-form的插槽中插入su-input、su-label、su-button，以创建一个合适的实用表单。每个简单组件渲染后都包含多个HTML的DOM元素以满足各种需求。例如，su-input 不仅仅是一个<输入>元素，它还包含显示相应标签、验证错误和提示的元素。我的目标是创建 grapejs 组件，并从这些简单的 vuejs 组件中屏蔽，目前我已经在一定程度上实现了。我的 grapesjs 组件模型的 tagNames 是 vuejs 组件名（类似“su-form”）。但我正在使用自定义处理器渲染和挂载 vuejs 组件，并用元素的（$el）外部 HTML 定义模型组件。计划是让部分渲染元素可样式化。我已经完全失...

回答（3）

Ju99ernaut• 2021年3月4日

artf• 2021年3月10日

是的，你可以用自定义的“toHTML”/“toJSON”函数（模型中）来定义组件，以便自定义它们的输出

GJSBlock• 2026年5月17日

感谢你报告，@sudiptochoudhury。存档前每个组件是否存在一个事件，组件可以监听？的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因在报告中包含 GrapesJS 版本、浏览器和控制台错误

在 GitHub 上查看完整讨论 →