Vue 检测更新来源

wing_kai
  • 657

我现在有一SVG编辑器组件Editor,标记为可编辑元素的组件edit-component
这套组件,通过以下组合方式使用

  <editor>
    <edit-component />
    <edit-component />
    <edit-component />
  </editor>

editor的内部,会通过分析this.$slots.default ,来建立对应的编辑区,
对应到实际dom,大概样子如下

  <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>

当点击rect后,editordata会记录一个正在进行编辑的组件的几何状态(宽高边距),
并且在</editor>结束标签前渲染一个handler-shape组件来作为调整手柄,
当用户调整手柄的时候,我会在render方法里,
调整来自this.$slots.defaultVNode对应的attrs做到几何属性的关联

调整手柄的时候,这时改变元素几何状态的是来自组件内部的方法调用,
但现在还有一个需求,这个几何状态,也有可能是来自外部。

因为当我选中一个edit-component的时候,
会显示一个面板,里边有多个input来展示这个组件的几何信息。

用户除了拖动手柄,还可以通过输入数值来改变这个组件。
意味着组件的外可以通过更改传入的this.$slots.default来更新对应的正在编辑中的handler-shape

现在问题来了,一个组件,既可以通过内部改变他的data,又可以通过外部this.$slots.default的变化改变他的data,
那我有什么办法,来识别触发data更新的来源是哪里的呢?

回复
阅读 743
3 个回答

问题已解决。外部的更新,基本上就是触发组件的propsmounted()beforeDestroy(),通过对这三个东西进行监控,再通过父组件提前定义好的一个方法 this.$parent.func() 通知父组件更新它的data即可。

既然是外部传给内部的,那么内部就不要去改变它,不然你就违背了它的初衷

按照你说的需求,内部不要直接更改,而是emit一个事件让外部去更改

你知道吗?

宣传栏