事件

🌐 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>