How Can I Emits Event From Nodes With Props 'node-types'

[yczkhx-ths]

i got many custom nodes, and when i use 'node-types' to render my nodes, it seems i have no way to emits my events from my nodes;
here are codes:

<vue-flow v-model:nodes="store.nodes" v-model:edges="store.edges" :node-types="nodesType" :is-valid-connection="isValidConnection" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave" @my-event="handleEvent" > </vue-flow>
in this case, i dont use slot but 'node-types', and event emited from my nodes cantt be accepted

[bcakmakoglu]

You can wrap custom nodes in the nodeTypes object as a function and pass additional props that way:

const nodeTypes = {
  selectorNode: (props: NodeProps) => h(ColorSelectorNode, { ...props, onFoo: () => console.log('foo') }),
}

<script lang="ts" setup>
import type { NodeProps } from '@vue-flow/core'

const props = defineProps<NodeProps>()

const emits = defineEmits(['foo'])
</script>

<template>
  <button @click="emits('foo')">foo</button>
</template>

[yczkhx-ths]

Thanks. If it is convenient, please provide a sample on the official document for another me.
And another problem is, if there are too many customed nodes to render, i use v-for to fill slot; and it causes a problem that, when a new node instance is added to graph，all nodes in graph will refresh. this may be a Vue features or what.
so I then choose nodetypes to finish my work.
below are old code with 'slot'.

<vue-flow v-model:nodes="store.nodes" v-model:edges="store.edges" >
    <template v-for="(value, key) in nodeTypes" v-slot:[`node-${key}`]="data" :key="key">
        <component :is="value" v-bind="data" />
    </template>
</vue-flow>

[bcakmakoglu]

Ah yes, using a dynamic slot like that is going to cause massive re-renders, aside from causing all nodes to be remounted whenever a custom node is added.
Problem here is that, even if you add a key, the data keeps changing for nodes (like dimensions, position etc.) and when that happens you basically cause a re-render of the whole v-for list, which you'd want to avoid of course.
I should add that to the docs, in those cases the nodeTypes object is the way to go.