Vue组件跨层级数据传递优化咨询：A.vue>B.vue>C.vue高效方案探讨

Great question! Using props to pass data down through multiple levels (often called "prop drilling") is totally valid, but it can get tedious—especially if you ever add more components between A and C later. Here are a few cleaner, more efficient approaches tailored to your setup:

1. Use the Provide/Inject API (Recommended for This Exact Scenario) #

Vue built this API specifically to solve deep component data passing without prop drilling. It lets a parent component "provide" data that any deep child can "inject" directly, skipping the middleman (your B component entirely).

Vue 3 Example #

A.vue (Provider):

<script setup>
import { ref, provide, onMounted } from 'vue';

// Fetch data from your backend
const backendData = ref(null);

onMounted(async () => {
  const response = await fetch('/your-core-api-endpoint');
  backendData.value = await response.json();
});

// Provide the data to all child/grandchild components
provide('sharedBackendData', backendData);
</script>

C.vue (Injector):

<script setup>
import { inject } from 'vue';

// Inject the data using the same key from the provider
const backendData = inject('sharedBackendData');
</script>

<template>
  <!-- Use backendData directly here -->
  <div>{{ backendData?.someProperty }}</div>
</template>

Vue 2 Example #

A.vue (Provider):

export default {
  data() {
    return {
      backendData: null
    };
  },
  provide() {
    // Return an object with the data to share
    return {
      sharedBackendData: this.backendData
    };
  },
  mounted() {
    // Fetch data from backend
    fetch('/your-core-api-endpoint')
      .then(res => res.json())
      .then(data => {
        this.backendData = data;
      });
  }
};

C.vue (Injector):

export default {
  // Inject the data by name
  inject: ['sharedBackendData'],
  template: '<div>{{ sharedBackendData?.someProperty }}</div>'
};

Pro Tip: For reactive data, Vue 3 automatically preserves reactivity when passing ref/reactive objects via provide/inject. In Vue 2, wrap the data in a reactive object or use a computed property in the provider to keep updates flowing.

2. State Management (Pinia/Vuex) #

If your backend data needs to be accessed by multiple unrelated components (not just C), or if you have complex state logic (like updating/deleting data), a state management library is the way to go. It centralizes your data so any component can access it directly, regardless of hierarchy.

Pinia (Vue 3 Preferred) Example #

First, create a store:

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

export const useBackendStore = defineStore('backend', {
  state: () => ({
    data: null
  }),
  actions: {
    async fetchData() {
      const response = await fetch('/your-core-api-endpoint');
      this.data = await response.json();
    }
  }
});

A.vue (Fetch Data):

<script setup>
import { useBackendStore } from '@/stores/backendStore';
import { onMounted } from 'vue';

const store = useBackendStore();

onMounted(() => {
  // Fetch data once when A mounts
  store.fetchData();
});
</script>

C.vue (Access Data):

<script setup>
import { useBackendStore } from '@/stores/backendStore';

const store = useBackendStore();
</script>

<template>
  <div>{{ store.data?.someProperty }}</div>
</template>

Vuex (Vue 2/Vue 3 Compatible) #

Similar to Pinia—create a store with state, actions, and getters. A dispatches an action to fetch data, and C uses mapState or directly accesses $store.state to get the data.

3. Event Bus (Not Recommended for Complex Apps) #

For simple one-off communication, you can use an event bus, but it’s easy to make your code hard to maintain as your app scales. In Vue 3, you’ll need a library like mitt since Vue no longer provides a built-in event bus.

Vue 3 + Mitt Example #

1. Install mitt: npm install mitt
2. Create an emitter:

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

A.vue (Emit Data):

<script setup>
import { ref, onMounted } from 'vue';
import { emitter } from '@/utils/emitter';

const backendData = ref(null);

onMounted(async () => {
  const response = await fetch('/your-core-api-endpoint');
  backendData.value = await response.json();
  // Emit the data to any listening components
  emitter.emit('backend-data-loaded', backendData.value);
});
</script>

C.vue (Listen for Data):

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { emitter } from '@/utils/emitter';

const backendData = ref(null);

onMounted(() => {
  // Listen for the event
  const handleDataLoad = (data) => {
    backendData.value = data;
  };
  emitter.on('backend-data-loaded', handleDataLoad);

  // Clean up the listener when the component unmounts
  onUnmounted(() => {
    emitter.off('backend-data-loaded', handleDataLoad);
  });
});
</script>

Which Should You Choose? #

• Provide/Inject: Best for your exact scenario (A → B → C deep hierarchy with no need to share data elsewhere). It’s lightweight and avoids prop drilling.
• Pinia/Vuex: Ideal if the data needs to be used across multiple components or has complex state logic.
• Event Bus: Only for simple, one-time communication—avoid it for most production apps as it can lead to unmaintainable "spaghetti code".

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