inject通信

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

<script>
//發(fā)送組件
export default {
  inject: ['grandparentMethod'],
  methods: {
    notifyGrandparent() {
      this.grandparentMethod('來(lái)自子組件的消息');
    }
  }
}
</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); // 觸發(fā)事件
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

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

export default {
  created() {
    EventBus.$on('dataFetched', (data) => {
      // 處理數(shù)據(jù)
      console.log(data);
    });
  }
}
</script>