1. 程式人生 > >Vue學習之路(九) --- 非父元件之間的通訊

Vue學習之路(九) --- 非父元件之間的通訊

1. 非vuex實現 非父元件之間的通訊

原理是:在父元件或者全域性建立一個事件倉儲eventHub,然後通過$emit 和 $on 實現通訊

1.1 通過在window上繫結eventHub的Vue例項物件,具體實現方法如下:

目錄結構

這裡寫圖片描述這裡寫圖片描述

在繫結eventHub例項物件之前需要import Vue from ‘vue’,然後根元件中使用window.eventHub = new Vue()

這裡寫圖片描述

在cartControl子元件通過$emit傳送通訊,在shopcart裡通過$on接收通訊
這裡寫圖片描述
這裡寫圖片描述

1.2通過在根元件中的main.js中註冊事件倉儲

在main.js中建立事件倉儲後,直接在data中繫結eventHub,然後就可以在子元件通過this.$root.eventHub訪問到事件倉儲

這裡寫圖片描述這裡寫圖片描述這裡寫圖片描述