嗨，@artf。我有一些关于组件生命周期钩子的问题。在我的应用程序中，我想跟踪组件所有子节点及其子节点的更新情况，依此类推。我该怎么做？直接子节点的更新通过“model.updated（）”钩子追踪，但我需要跟踪一个组件（我们称之为super child）的更新，该组件是另一个组件的嵌套子节点（我们称之为super parent）。在超级父节点和超级子节点之间，可以有任意数量的组成部分。我该如何跟踪这些更新？比如，如果我在super child中添加了一个组件，我想在super parent里做一些事情。而且，我无法在全球范围内追踪这些变化。我想在组件层面做。为了给我的问题提供更多背景，我现在想做的是：我有一个自定义组件，用户可以根据特征中指定的列数设置网格结构。网格有多个类似的自定义单元组件。每个网格单元都可以编辑，如果用户更改了一个网格单元（添加或删除组件），其他网格单元也会获得更新。为了跟踪这些变化，我使用了自定义网格组件上的属性。属性就像网格中单元格的蓝图（它代表单元结构，是最近更新的单元组件）

问题 #3172💬 已回答提出于 2020年12月8日作者 theSC0RP0 个反应

提问组件 typescript

How to track the updates of components down the tree?

快速解答作者 artf

我会在父节点上创建一个专门的监听器 “''js 父分量 ... init（） { this.on（'cell-changed'， this.doStuff） }

阅读下方完整回答 ↓

问题

嗨，@artf。我有一些关于组件生命周期钩子的问题。

在我的应用程序中，我想跟踪组件所有子节点及其子节点的更新情况，依此类推。我该怎么做？
直接子节点的更新通过“model.updated（）”钩子追踪，但我需要跟踪一个组件（我们称之为_super child_）的更新，该组件是另一个组件的嵌套子节点（我们称之为_super parent_）。在超级父节点和超级子节点之间，可以有任意数量的组成部分。我该如何跟踪这些更新？比如，如果我在_super child_中添加了一个组件，我想在_super parent_里做一些事情。

而且，我无法在全球范围内追踪这些变化。我想在组件层面做。

<hr/> 为了给我的问题提供更多背景，我现在想做的是：<br/> 我有一个自定义组件，用户可以根据特征中指定的列数设置网格结构。网格有多个类似的自定义单元组件。<br/> 每个网格单元都可以编辑，如果用户更改了一个网格单元（添加或删除组件），其他网格单元也会获得更新。<br/> 为了跟踪这些变化，我使用了自定义网格组件上的属性。属性就像网格中单元格的蓝图（它代表单元结构，是最近更新的单元组件）

回答（2）

artf• 2020年12月14日

我会在父节点上创建一个专门的监听器 “''js 父分量 ... init（） { this.on（'cell-changed'， this.doStuff） }

然后我会从子节点触发该事件
“''js
更新（） {
 const parent = this.closestType（'grid-type'）;
 parent & & parent.trigger（'cell-changed'， { keys： 'values' }）
}

GJSBlock• 2026年5月17日

谢谢你举报，@theSC0RP。关于如何追踪组件更新在树上？的好问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） => console.log（'componen...

在 GitHub 上查看完整讨论 →