I now have a SVG editor component Editor marked as editable element edit-component .
this set of components is used in the following combinations
<editor>
<g>
<edit-component />
<rect fill="transparent" onClick={this.startEdit} />
</g>
<g>
<edit-component />
<rect fill="transparent" onClick={this.startEdit} />
</g>
<g>
<edit-component />
<rect fill="transparent" onClick={this.startEdit} />
</g>
<handler-shape />
</editor> when rect is clicked, data of editor records the geometric state (wide and high margins) of a component being edited,
and renders a handler-shape component as an adjustment handle before < / editor > closes the tag.
when the user adjusts the handle, I adjust the < code from this.$slots.default in the render method.
when adjusting the handle, the method call that changes the geometric state of the element is from within the component,
but now there is a requirement that this geometric state may also come from the outside.
because when I select a edit-component ,
displays a panel with multiple input to show the geometry of this component.
in addition to dragging the handle, the user can also change the component by entering a numeric value.
means that the external part of the component can update the corresponding handler-shape
this.$slots.default passed in.
now the problem is that a component can change its data, both internally and externally this.$slots.default to its data,
, so what can I do to identify the source that triggered the data update?