AntV X6（v1.32.8）结合Vue组件渲染节点，并与节点组件进行双向的数据交互

项目使用 Vue2.0 + Element-ui 框架，在开发流程功能时自定义节点，为实现稍复杂的样式以及操作交互，使用 markup + attrs的方式的话，比较麻烦，且难以结合使用 Element-ui的交互组件，因此换成结合 Vue组件渲染方式注册自定义节点
（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）

安装依赖（本文X6版本是 v1.32.8）

npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save
npm install @vue/composition-api --save

流程组件（父组件）

<script>
	import { Graph } from '@antv/x6'
	import { register } from '@antv/x6-vue-shape'
	import FlowNode from './components/FlowNode'
		    
	export default {
		methods: {
			// 注册自定义节点
			registerCustomNode() {
				register({
				  shape: 'flow-node',
				  width: 200,
				  height: 200,
				  component: {
				  	// 使用 render函数来创建组件
				    render: h => h(FlowNode, {
				      on: {
				      	// 监听 FlowNode组件触发的事件，获取传递出来的数据
				        myEvent: (data) => {
				          this.handleMyEvent(data)
				        }
				      }
				    })
				  }
				})
			},
			handleMyEvent(data) {
				...
			}
		}
	}
</script>

节点组件（子组件）

/* FlowNode组件 */
<script>	    
	export default {
		name: 'FlowNode',
		// 在节点组件中通过 inject 配置来获取 node 和 graph
  		inject: ['getNode'],
  		data () {
		    return {
		      curNode: null,
		      nodeData: null
		    }
	  	},
	  	mounted () {
		    this.curNode = this.getNode()
		    this.nodeData = this.curNode?.data ?? {}
		    // 外部更新节点数据时，可监听 data的 change事件来获取
		    /* this.curNode.on('change:data', ({ current }) => {
		      this.nodeData = current.data
		    }) */
		  },
		methods: {
			onMyEvent(node) {
				// 节点组件中触发事件，传递数据
				this.$emit('myEvent', 'data from FlowNode')
			}
		}
	}
</script>

数据交互

以上是我自己想办法写的一种数据交互方式，相当于是【节点组件】通过 inject、'change:data'的方式获取【流程组件】中赋予节点的数据，通过 $emit 将数据传递给【流程组件】，【流程组件】在注册节点的时候使用 render函数来创建组件，并监听【节点组件】中的事件。
（还有其他数据交互的方式，比如通过 Vuex，根据实际情况可以尝试。）