antv x6自定义Vue节点的传值问题

一、如何根据节点上带有的数据自定义Vue节点

1. 自定义节点如何设置初始值？
   要在x6中使用一个节点，需要有三步:
   第一步注册节点，第二步创建节点，第三步将节点添加到画布上。
   注册节点时，普通自定义节点通过 Graph.registerNode api进行节点注册即可。
   Vue节点的注册需要引入插件import { register } from "@antv/x6-vue-shape"通过register方法进行注册。
   创建节点时，所有自定义节点操作相同。初始化节点数据的操作可以放在第一步注册节点时，也可以放在第二步创建节点时，如果两个步骤中都写了节点数据，x6会执行一次Object.assign(注册时数据,创建时数据)。
2. 如何更新值并在节点内获取
   Vue节点中无法通过props直接获取到节点的值，x6中会给节点注入getNode方法使得节点内部能够拿到节点的数据，使用方式如下

// 接收到getNode方法
const getNode = inject('getNode')
// 调用该方法获取到node的数据
const node = getNode()
// 读取到给节点传的业务数据
const nodeInfo = ref(node?.data || {})

// 当然这种方式只能在初始化的时候获取到节点数据，那当节点数据更新时，如何获取呢？
onMounted(() => {
  // node中提供了change:data事件
  // 监听数据变化，实现响应式
  node.on('change:data', ({ current }) => {
    nodeInfo.value = current;
    console.log("===节点数据变化===",nodeInfo.value)
  });
})

二、自定义节点如何与工程外部进行交互

不改变节点本身数据的情况下，节点的内外部想要进行一些交流，有两种方式

1. 全局事件总线
   通过全局事件进行处理，只要在js环境中，就能访问，不受限制
2. pinia
   因为pinia为单例模式，只要外部业务系统已经引入，就都能共用