vue flow 获取全部节点数据

如果你想要在 Vue 中获取 Flowchart 组件中的全部节点数据，可以使用 `$refs` 属性获取到 Flowchart 组件的引用，然后访问其 `nodes` 属性。例如：

1. 在 Flowchart 组件中，使用 `ref` 属性给 Flowchart 组件命名，例如：

<template>
  <div>
    <flowchart ref="myFlowchart" :nodes="nodes" />
    <button @click="getAllNodes">Get All Nodes</button>
  </div>
</template>

<script>
import Flowchart from './Flowchart.vue';

export default {
  components: {
    Flowchart
  },
  data() {
    return {
      nodes: [
        { id: 'node1', text: 'Node 1', x: 100, y: 100 },
        { id: 'node2', text: 'Node 2', x: 300, y: 100 },
        { id: 'node3', text: 'Node 3', x: 200, y: 200 }
      ]
    };
  },
  methods: {
    getAllNodes() {
      const nodes = this.$refs.myFlowchart.nodes;
      console.log(nodes);
    }
  }
};
</script>

在这个例子中，我们使用 `ref` 属性给 Flowchart 组件命名为 `myFlowchart`，然后在点击“Get All Nodes”按钮时，调用 `getAllNodes` 方法，获取 Flowchart 组件中的全部节点数据，并输出到控制台中。

2. 在 Flowchart 组件中，使用 `$emit` 方法向父组件发送事件，并将节点数据作为参数传递给父组件。例如：

<template>
  <div>
    <flowchart :nodes="nodes" @get-all-nodes="getAllNodes" />
  </div>
</template>

<script>
import Flowchart from './Flowchart.vue';

export default {
  components: {
    Flowchart
  },
  data() {
    return {
      nodes: [
        { id: 'node1', text: 'Node 1', x: 100, y: 100 },
        { id: 'node2', text: 'Node 2', x: 300, y: 100 },
        { id: 'node3', text: 'Node 3', x: 200, y: 200 }
      ]
    };
  },
  methods: {
    getAllNodes(nodes) {
      console.log(nodes);
    }
  }
};
</script>

在这个例子中，我们在 Flowchart 组件中使用 `$emit` 方法向父组件发送名为 `get-all-nodes` 的事件，并将节点数据作为参数传递给父组件。在父组件中，我们使用 `@get-all-nodes` 监听该事件，并调用 `getAllNodes` 方法，获取传递过来的节点数据，并输出到控制台中。