事件

¥Events

VueFlow 提供了一组事件，你可以监听这些事件以响应流程中的更改。

¥VueFlow provides a set of events that you can listen to in order to react to changes in the flow.

完整的事件列表可在 API 参考 中找到。

¥A full list of events can be found in the API Reference.

监听事件

¥Listening to Events

VueFlow 组件

¥VueFlow Component

你可以使用 @ 指令监听 VueFlow 组件上的事件：

¥You can listen to events on the VueFlow component by using the @ directive:

<script setup>
import { ref } from 'vue';  
import { VueFlow } from '@vue-flow/core';

const nodes = ref([/* ... */]);
const edges = ref([/* ... */]);

// Node click event handler
function onNodeClick({ event, node }) {
  console.log('Node clicked:', node, event);
}

// Edge click event handler
function onEdgeClick({ event, edge }) {
  console.log('Edge clicked:', edge, event);
}
</script>

<template>
  <VueFlow :nodes="nodges" :edges="edges" @node-click="onNodeClick" @edge-click="onEdgeClick"></VueFlow>
</template>

流程实例 / useVueFlow

¥Flow Instance / useVueFlow

你还可以使用事件钩子监听 Flow 实例上的事件。

¥You can also listen to events on the Flow instance by using the event hooks.

所有事件均可从 useVueFlow 和 on<EventName> 获得。例如，node-click 事件可用作 onNodeClick。

¥All events are available from useVueFlow as on<EventName>. For example, the node-click event is available as onNodeClick.

<script setup>
import { ref } from 'vue';
import { VueFlow, useVueFlow } from '@vue-flow/core';

const nodes = ref([/* ... */]);
const edges = ref([/* ... */]);

// All events are available from `useVueFlow` as `on<EventName>`
const { onNodeClick, onEdgeClick } = useVueFlow();

// Node click event handler
onNodeClick(({ event, node }) => {
  console.log('Node clicked:', node, event);
});

// Edge click event handler
onEdgeClick(({ event, edge }) => {
  console.log('Edge clicked:', edge, event);
});
</script>

<template>
  <VueFlow :nodes="nodges" :edges="edges" @node-click="onNodeClick" @edge-click="onEdgeClick"></VueFlow>
</template>