Vue 非父子組件通信方案

概述

在 Vue 中模塊間的通信很普遍
如果是單純的父子組件間傳遞信息，父組件可以使用 props 將數據向下傳遞到子組件，而在子組件中可以使用 events （父組件需要先監聽對應子組件觸發的事件） 向父組件傳遞信息。
但是當我們需要進行非父子組件間的通信或者是父子組件間的通信需要層層傳遞過於復雜時就需要使用非父子組件通信方案來進行組件間信息的傳遞：

下面是常見的兩種非父子組件通信方案：

1. 使用一個空的 Vue 實例作為一個事件總線中心 Bus
2. 使用專門的狀態管理模式 vueX

一、事件總線中心 Bus

總線中心 Bus 的實現思想是先把自己在 main.js 裏進行全局註冊，這樣在每個組件都能通過 this 訪問到它，由於 Bus 本身就是一個 vue 實例，所以具備 $emit

具體使用如下：

1. 在 main.js 裏面

將 bus 從 通過 Vue.prototype 全局註冊，這樣在所有的vue實例中都能通過 this.$bus 訪問到 Bus:

import Vue from ‘vue‘

const bus = new Vue()
Vue.prototype.$bus = bus

2. 在需要發送或接收事件的組件裏面

    // 觸發事件
    this.$bus.$emit(‘my-event‘, this.data);
    // 監聽事件
 

    this.$bus.$on(‘my-event‘, this.handleFunction);
    // 取消事件
    this.$bus.$off(‘my-event‘, this.handleFunction);

    // 實際使用場景，在需要監聽事件的組件中 在 created監聽，在beforeDestroy中取消
    created (){
        this.$bus.$on(‘switch-change‘, this.switchChange);
    },
    beforeDestroy () {
        this.$bus.$off(‘switch-change‘
 
, this.switchChange);
    },

二、狀態管理模式 vueX

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。具體實現這裏有詳細的介紹

Vue 非父子組件通信方案