x6-vue-shape 使用自定义渲染节点时初始化传值可以，如何动态传值

[SmallBlockCat]

graph.addNode({
shape: 'vue-shape',
x: 32,
y: 48,
width: 180,
height: 40,
component: {
template: <hello-world :name="name"></hello-world>,
data() {
return {
name: 'x6',
}
},
components: {
HelloWorld,
}
},
})
这是demo的例子，我也是这样实现的name传参，新建node节点的时候可以传过去，后面再修改name的值时却修改不了了，请问是什么问题？

[NewByVector]

可以参考这个 demo，通过事件监听方式。

[lloydzhou]

@SmallBlockCat
最近在使用x6的时候，发现直接操作graph的方式并不那么好用，自己用vue封装了一组UI组件。
可以像使用普通的vue组件的方式来使用。
至于这个更新组件渲染的情况，这里内部渲染的变量实际来自Graph外层的组件，所以不用去监听内部的change事件。

import Graph, { useVueShape, VueShapeProps } from 'antv-x6-vue'

const CustomNode = defineComponent({
  name: 'CustomNode',
  props: [...VueShapeProps, 'otherOptions'],
  inject: [contextSymbol],
  setup(props, context) {
    const cell = useVueShape(props, context)
    useCellEvent('node:click', (e) => context.emit('click', e), { cell })
    return () => null
  }
})

// 模板
<Graph>
   <CustomNode primer="circle" id="4" :x="400" :width="100" :height="100" :y="y" :attrs="{circle: {fill: '#ddd', stroke: '#333'}, label: {text: 'CustomNode'}}" @added="added" @click="click">
      <span style="text-align: center;display: inline-block;width: 100%;margin-top: 20px;">Hello {{name}}</span>
  </CustomNode>
</Graph>