inject通信

<script>
//接收组件
export default {
  provide() {
    return {
      grandparentMethod: this.grandparentMethod
    };
  },
  methods: {
    grandparentMethod(message) {
      console.log('祖父组件收到:', message);
    }
  }
}
</script>

<script>
//发送组件
export default {
  inject: ['grandparentMethod'],
  methods: {
    notifyGrandparent() {
      this.grandparentMethod('来自子组件的消息');
    }
  }
}
</script>

事件总线（Event Bus）

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// request.js
import { EventBus } from './eventBus';

export function fetchData() {
  axios.get('/api/data')
    .then(response => {
      EventBus.$emit('dataFetched', response.data); // 触发事件
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

// App.vue
<script>
import { EventBus } from './eventBus';

export default {
  created() {
    EventBus.$on('dataFetched', (data) => {
      // 处理数据
      console.log(data);
    });
  }
}
</script>