antv X6中vue节点的事件捕获

背景

初次使用antv X6来进行流程图的绘制。想要对vue节点中的事件在父组件中捕获。

问题描述

观其文档，其中提到vue节点的渲染，文中只提到了如何将vue组件渲染为画布中的节点，以及数据的传递，并未提到vue节点中的事件如何被捕获。

当节点复杂时，需要对节点中的某个按钮或者某一部分绑定事件，为了代码的低耦合，我一定是要将事件抛出来，在他的父组件中进行逻辑书写，那么这个节点如何能够将事件抛出到父组件中来。

分析过程

我看到官网中有些到自定义事件，但是其节点的实现方式是编程式的，事件绑定也是在节点编写时就绑定了(event字段)。

节点书写

node.attr({
  // 表示一个删除按钮，点击时删除该节点
  image: {
    event: 'node:delete',
    xlinkHref: 'trash.png',
    width: 20,
    height: 20,
  },
})

事件监听

graph.on('node:delete', ({ view, e }) => {
  e.stopPropagation()
  view.cell.remove()
})

思考，如果在vue节点中emit出我的事件，会不会被父组件中的graph所监听到呢

vue节点注册

  register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: ProgressNode,
  })

vue组件抛出事件

<el-button class="btn add" @click.stop="emitAddEvent">
  添加
</el-button>

const emitAddEvent = (event) => {
  emit('node:add', {
    node: currentNode,
    e: event,
  });
};

父组件监听事件

graph.on('node:add', ({ node }) => {
  currentNode = node
  console.log('捕获到了事件')
})

最后问题没有被解决

不知道是什么原因，希望大佬们有知道原因的告知一下，感谢

解决方案

在注册vue节点时，就进行事件绑定，需要注意的是，此时事件的名称为nodeAdd，但是需要书写的属性需要为onNodeAdd

register({
  shape: 'custom-vue-node',
  width: 100,
  height: 100,
  component: {
    render() {
      return h(ProgressNode, {
        onNodeAdd: ({ node, e }) => nodeAdd(node, e),
      })
    }
  },
})

同样不知道是什么逻辑，希望大佬们有知道原因的告知一下，感谢