自定义vue节点如何把数据传递给父级？

zlecheng commented 4 months ago

问题描述

现在用的是x6的vue节点，vue节点内部有个复选框，用于勾选节点，需要在触发勾选复选框的时候把值传递给父组件（也就是使用TeleportContainer的那个页面）

重现链接

暂无

重现步骤

暂无

预期行为

希望把vue节点内的数据再反向传递给父组件，或者能在vue节点内部直接改当前节点的数据也是可以的

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox ...]
X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

x6-bot[bot] commented 4 months ago

👋 @sxdPanda

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

qw123gz commented 4 months ago

052701 052702 在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

zlecheng commented 4 months ago

你试过吗？我用vue3试了不行

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月27日 11:33 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) |

052701.png (view on web) 052702.png (view on web) 在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

qw123gz commented 4 months ago

我用vue2是可以的

---原始邮件--- 发件人: @.> 发送时间: 2024年5月27日(周一) 中午11:58 收件人: @.>; 抄送: @.**@.>; 主题: Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323)

你试过吗？我用vue3试了不行

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月27日 11:33 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) |

052701.png (view on web) 052702.png (view on web) 在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.> — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.>

zlecheng commented 4 months ago

vue3咋都不触发子组件的emit事件呢

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月27日 12:10 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) |

我用vue2是可以的

---原始邮件--- 发件人: @.> 发送时间: 2024年5月27日(周一) 中午11:58 收件人: @.>; 抄送: @.**@.>; 主题: Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323)

你试过吗？我用vue3试了不行

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月27日 11:33 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) |

052701.png (view on web) 052702.png (view on web) 在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.> — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

zlecheng commented 4 months ago

vue3 解决方案请移步：文档1 / 文档2

qw123gz commented 4 months ago

厉害👍🏻，学到了

---原始邮件--- 发件人: @.> 发送时间: 2024年5月27日(周一) 下午3:23 收件人: @.>; 抄送: @.**@.>; 主题: Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323)

vue3 解决方案请移步：文档1 / 文档2

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

SnowfungusWang commented 4 months ago

在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

请问在register中的component是对应的vue- component吗？感谢🙏

zlecheng commented 4 months ago

在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

请问在register中的component是对应的vue- component吗？感谢🙏

是的

zlecheng commented 4 months ago

在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

请问在register中的component是对应的vue- component吗？感谢🙏

我的文档里面都有写

SnowfungusWang commented 4 months ago

在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

请问在register中的component是对应的vue- component吗？感谢🙏

我的文档里面都有写

感谢回复！可以再请问一下这里的 getMyCheckVal(val)是调用了父组件的getMyCheckVal函数吗

zlecheng commented 4 months ago

这个是你在父组件用于接收子组件传递的值，函数名称随便都行，重要是的是把那个val取到父组件里面使用

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月31日 17:01 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) |

在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受

请问在register中的component是对应的vue- component吗？感谢🙏

我的文档里面都有写

感谢回复！可以再请问一下这里的 getMyCheckVal(val)是调用了父组件的getMyCheckVal函数吗 image.png (view on web)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

SnowfungusWang commented 4 months ago

这个是你在父组件用于接收子组件传递的值，函数名称随便都行，重要是的是把那个val取到父组件里面使用 … ---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月31日 17:01 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) | 在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受请问在register中的component是对应的vue- component吗？感谢🙏 我的文档里面都有写感谢回复！可以再请问一下这里的 getMyCheckVal(val)是调用了父组件的getMyCheckVal函数吗 image.png (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

非常感谢，这个函数属于父组件的理解正确吗🙆

zlecheng commented 4 months ago

可以这么理解，你搞懂vue子传父就明白这里了

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月31日 17:49 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) |

这个是你在父组件用于接收子组件传递的值，函数名称随便都行，重要是的是把那个val取到父组件里面使用 … ---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2024年05月31日 17:01 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [antvis/X6] 自定义vue节点如何把数据传递给父级？ (Issue #4323) | 在注册自定义组件的时候，给自定义组件添加自定义事件，在子组件中可以$emit传递数据，在父组件进行接受请问在register中的component是对应的vue- component吗？感谢🙏 我的文档里面都有写感谢回复！可以再请问一下这里的 getMyCheckVal(val)是调用了父组件的getMyCheckVal函数吗 image.png (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

非常感谢，这个函数属于父组件的理解正确吗🙆

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

lcedaw commented 1 month ago

那在angular怎么子传父

lcedaw commented 1 month ago

那在angular怎么子传父

zzbone commented 3 weeks ago

那在angular怎么子传父

可以使用ng-template去register节点，如下

注册节点所在的html

<ng-template #myNode let-data="ngArguments">
<app-my-node [selectedNode]="data.selectedNode" (test)="testMethod($event)"></app-my-node>
</ng-template>

注册节点所在的ts


import { register } from "@antv/x6-angular-shape";

private injector: Injector = inject(Injector); @ViewChild("myNode") myNodeTemplate: TemplateRef<{}>;

register({ shape: "custom-angular-flow-node-op", injector: this.injector, width: this.opWidth, height: this.opHeight, content: this.myNodeTemplate, });

testMethod(e: string) { console.log("🚀 ~ testMethod ~ e:", e); }

---
`MyNodeComponent` 
* `html`
```html
<button (click)="clickItem()"></button>

ts

@Output() test: EventEmitter<string> = new EventEmitter<string>();
clickItem() {
this.test.emit("哈哈哈");
}

antvis / X6