antv x6 注册vue组件 响应传值

使用antv x6 vue组件创建节点信息-当节点过于复杂可以考虑，避免使用markup\attr过于复杂  

官网 antv -vue组件

示例1 、 使用inject 接收父组件传值

import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'

渲染节点

3s后改变值

创建画布

const graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        grid: true,
        background: {
          color: '#F2F7FA'
        }
      })

注册vue组件

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

添加节点---使用组件

     graph.addNode({
        id: 'node1',
        shape: 'custom-vue-node',
        x: 240,
        y: 140
      })

      graph.addNode({
        id: 'node2',
        shape: 'custom-vue-node', // 使用 - VUE组件
        x: 340,
        y: 240
      })

改变节点值

 const node = graph.getCellById('node1')
      const node2 = graph.getCellById('node2')
      // 节点1
      node.setData({
        text: 'node节点1'
      })
      // 节点2
      node2.setData({
        text: 'node节点2'
      })

      // 过3s 更改节点值是否是响应
      setTimeout(() => {
        node.setData({
          text: 'node节点1-change'
        })
        console.log('change')
      }, 3000)

以上是基本创建，

TestNode.vue组件

export default {
  name: 'test2View',
  inject: ['getNode'],
  data() {
    return {
      nodeInfo: {}
    }
  },
  mounted() {
    console.log('getNode', this.getNode())
    // console.log('tnode----', this.tnode)

    const node = this.getNode()
    this.nodeInfo = node?.data
    // 监听 change:data数据变化
    node.on('change:data', ({ current }) => {
      console.log('current', current)
      const { text } = current
      this.nodeInfo = current
    })
  },
  methods: {}
}

示例2 、 使用render函数来创建组件