Vue 非父子組件通訊方案

Vue 非父子組件通訊方案

概述

在 Vue 中模塊間的通訊很廣泛
若是是單純的父子組件間傳遞信息，父組件可使用 props 將數據向下傳遞到子組件，而在子組件中可使用 events （父組件須要先監聽對應子組件觸發的事件） 向父組件傳遞信息。
可是當咱們須要進行非父子組件間的通訊或者是父子組件間的通訊須要層層傳遞過於複雜時就須要使用非父子組件通訊方案來進行組件間信息的傳遞：

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

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

1、事件總線中心 Bus

總線中心 Bus 的實現思想是先把本身在 main.js 裏進行全局註冊，這樣在每一個組件都能經過 this 訪問到它，因爲 Bus 自己就是一個 vue 實例，因此具有 $emit 和 $on 方法，這樣咱們就能在 Bus 上經過自定義事件的方式發送和監聽事件來傳遞數據，並且不受組件的位置關係影響。

具體使用以下：

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);
    },

2、狀態管理模式 vueX

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