Vue组件间数据传递：如何将Component A数据传给Component B

针对你的组件结构（Component C嵌套A和B），以下是几种直接可行的实现方案：

方案一：父组件Component C做中转（推荐，逻辑最清晰） #

利用Vue的父-子组件通信，通过C作为中间层传递数据：

1. 修改Component A，向父组件触发事件传递数据 #

当nodeName更新时，通过$emit把数据传给Component C：

<script>
export default {
  data() {
    return {
      nodeName: ''
    };
  },
  mounted() {
    window.addEventListener('node_clicked', (e) => {
      this.nodeName = e.detail.name;
      // 向父组件发送选中的节点数据
      this.$emit('node-selected', this.nodeName);
    });
  },
  // 可选：用watch监听nodeName变化，避免重复触发（比如用户重复点击同一节点）
  watch: {
    nodeName(newVal) {
      if (newVal) {
        this.$emit('node-selected', newVal);
      }
    }
  }
}
</script>

2. Component C接收数据并传递给Component B #

在C的模板中监听A的事件，存储数据后通过props传给B：

<template>
  <div class="component-c-container">
    <!-- 嵌套Component A并监听事件 -->
    <ComponentA @node-selected="updateSelectedNode" />
    <!-- 嵌套Component B，通过props传递数据 -->
    <ComponentB :selected-node="currentNode" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentNode: ''
    };
  },
  methods: {
    updateSelectedNode(nodeName) {
      this.currentNode = nodeName;
    }
  }
}
</script>

3. Component B接收props并调用API渲染表格 #

通过props接收数据，监听props变化时触发API请求：

<template>
  <table v-if="tableData.length > 0">
    <thead>
      <tr>
        <!-- 表格表头 -->
        <th>节点名称</th>
        <th>数据字段1</th>
        <th>数据字段2</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.nodeName }}</td>
        <td>{{ item.field1 }}</td>
        <td>{{ item.field2 }}</td>
      </tr>
    </tbody>
  </table>
  <div v-else>请选择节点查看表格数据</div>
</template>

<script>
export default {
  props: {
    selectedNode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData: []
    };
  },
  watch: {
    // 监听选中节点变化，调用API
    async selectedNode(newNode) {
      if (!newNode) return;
      try {
        const response = await fetch(`/api/table-data?node=${encodeURIComponent(newNode)}`);
        this.tableData = await response.json();
      } catch (err) {
        console.error('获取表格数据失败:', err);
      }
    }
  },
  // 可选：组件初始化时若已有选中节点，直接请求数据
  async mounted() {
    if (this.selectedNode) {
      const response = await fetch(`/api/table-data?node=${encodeURIComponent(this.selectedNode)}`);
      this.tableData = await response.json();
    }
  }
}
</script>

方案二：事件总线（适合跨层级但不复杂的场景） #

如果组件结构更复杂，可通过事件总线实现无层级通信（Vue3推荐用mitt库）：

1. 创建事件总线实例 #

// eventBus.js
import mitt from 'mitt';
const emitter = mitt();
export default emitter;

2. Component A发送事件 #

<script>
import emitter from './eventBus.js';

export default {
  data() {
    return { nodeName: '' };
  },
  mounted() {
    window.addEventListener('node_clicked', (e) => {
      this.nodeName = e.detail.name;
      emitter.emit('node-selected', this.nodeName);
    });
  }
}
</script>

3. Component B监听事件 #

<script>
import emitter from './eventBus.js';

export default {
  data() {
    return { tableData: [] };
  },
  mounted() {
    // 监听事件并请求数据
    this.eventHandler = emitter.on('node-selected', async (nodeName) => {
      try {
        const response = await fetch(`/api/table-data?node=${encodeURIComponent(nodeName)}`);
        this.tableData = await response.json();
      } catch (err) {
        console.error('获取表格数据失败:', err);
      }
    });
  },
  // 组件销毁时清理监听，避免内存泄漏
  beforeUnmount() {
    emitter.off('node-selected', this.eventHandler);
  }
}
</script>

方案三：状态管理（适合大型多组件共享数据场景） #

如果你的应用有很多组件需要共享这类数据，推荐用Pinia/Vuex做全局状态管理：

1. 创建Pinia Store #

// stores/nodeStore.js
import { defineStore } from 'pinia';

export const useNodeStore = defineStore('node', {
  state: () => ({
    selectedNode: ''
  }),
  actions: {
    setSelectedNode(nodeName) {
      this.selectedNode = nodeName;
    }
  }
});

2. Component A更新Store #

<script>
import { useNodeStore } from './stores/nodeStore.js';

export default {
  setup() {
    const nodeStore = useNodeStore();
    
    window.addEventListener('node_clicked', (e) => {
      nodeStore.setSelectedNode(e.detail.name);
    });
    
    return {};
  }
}
</script>

3. Component B监听Store数据 #

<script>
import { useNodeStore } from './stores/nodeStore.js';
import { storeToRefs } from 'pinia';
import { watch } from 'vue';

export default {
  setup() {
    const nodeStore = useNodeStore();
    const { selectedNode } = storeToRefs(nodeStore);
    const tableData = ref([]);
    
    // 监听选中节点变化，请求数据
    watch(selectedNode, async (newNode) => {
      if (!newNode) return;
      try {
        const response = await fetch(`/api/table-data?node=${encodeURIComponent(newNode)}`);
        tableData.value = await response.json();
      } catch (err) {
        console.error('获取表格数据失败:', err);
      }
    });
    
    return { tableData };
  }
}
</script>

内容的提问来源于stack exchange，提问作者user17206275