1. 前端跨域通信的⼏幾種⽅方式
自定義事件組件間通信深入理解：
自定義事件：自己定義的事件：事件類型（自己定義）和回調函數（自己定義自己觸發）
系統定義的事件：事件類型（固定幾個）和回調函數（自己定義系統觸發）
做法：在父組件當中可以看到子組件對象，給子組件對象綁定自定義事件$on 回調函數在父組件中
在子組件當中，我們需要傳遞數據的地方，去觸發自己身上的事件$emit，調用回調函數中傳參給父
適用：子向父通信
原因：因為父組件內部可以看到子組件對象，可以給子組件對象綁定事件，回調函數在父組件定義
而子組件內部看不到父組件對象，沒法給父組件對象綁定事件，子組件沒法定義回調函數，但是可以看到自己，可以觸發
接受數據的組件必須能看到預綁定事件的組件對象，才能綁定
發送數據的組件必須能看到綁定了事件的組件對象，才能觸發事件
$on
$emit
$off //解綁事件
$once //綁定只能觸發一次的事件
vm和組件對象的關系
全局事件匯流排組件間通信
適用於任意組件間傳遞 必須理解必須搞定
利用了自定義事件
創建一個中間人，讓所有的組件都可以看到這個人，並且這個人可以使用$on和$emit （vm添加到Vue原型當中作為匯流排）
在想要接受數據的組件內 找中間人去綁定事件
在想要發送數據的組件內 觸發中間人綁定的事件
通信方式 props
父子之間傳遞
父向子傳遞屬性，通過屬性把數據交給子組件
子向父傳遞數據，子組件通過調用父組件的行為函數，把數據當參數交給父組件使用場合：
父子最好
父向非子後代傳遞，必須逐層去傳遞 麻煩
不是父子關系的組件，必須藉助相同的父組件去通信 麻煩
通信方式 vue自定義事件 子向父傳遞，只是適合這個場合
理解原生dom事件：
事件類型 ： 固定的有限的幾個
回調函數 ： 誰調用（瀏覽器） 調用時候的默認參數（事件對象event）
vue自定義事件
事件類型 : 無數個
回調函數 ： 誰調用 （自己調用） 調用時候默認的參數 （有可能有也可能沒有 如果調用時候傳了參數，默認參數就有
如果沒有傳，那就沒有（undefined））
父組件當中去給子組件對象綁定事件監聽
@直接在組件標簽對象當中去綁定，和綁定系統事件一致
$on，在mounted當中去綁定，但是需要獲取到子組件標簽對象（通過ref指定，然後獲取到）
$once()和$on（）類似，但是只能觸發一次
在子組件當中適當的位置去觸發事件並傳遞參數
$emit(),在子組件當中去觸發，子組件對象觸發
$off()可以在銷毀之前解綁事件
使用場合：子向父傳遞數據，其餘情況都不能用
通信方式 全局事件匯流排
適用場合： 任何場合
事件匯流排(對象)滿足的兩個條件：1、所有的組件對象都能找到它 2、可以調用$on和$emit
vm對象和組件對象的關系
vm的原型對象 === 組件對象的原型對象的原型對象
本身自定義事件可以完成子向父之間的傳遞，因為父組件中可以看到子組件，可以為子組件綁定事件，子組件中可以觸發事件
但是如果不是子向父，那麼其餘的就沒辦法了，因為兩個組件互相是看不到的，沒辦法再其中一個給另外一個綁定事件
此時我們可以藉助中間人，也就是他們都可以同時看到的一個人，就是全局事件匯流排（所有的組件對象都能看到）
在接收數據的組件中，獲取匯流排綁定事件
在發送數據的組件中，獲取匯流排觸發事件
全局事件匯流排說到底就是個對象，我們通常就是用vm對象作為全局事件匯流排使用
把vm對象添加到Vue原型對象 就形成全局事件匯流排（vm）
通信方式 消息訂閱和發布（類似於全局事件匯流排，vue當中幾乎不用）
github查閱 PubSubJS第三方庫
訂閱者是接收數據的組件
發布者是發送數據的組件
坑： 訂閱者的回調函數裡面形參第一個必須有，而且是為了接受發布者的消息類型的，實際意義沒有，但是必須寫上
通信方式 slot插槽
一個組件會多次使用，但是又有少部分結構數據會發生變化，（當然可以用不同的子組件）
那麼就得通過父組件告訴子組件變化的內容是什麼，此時就要用到這個插槽
子組件當中<slot></slot>其實就是佔位用的，讓父元素給它填充內容，可以帶標簽
具名插槽
默認插槽
作用域插槽
子組件的slot可以通過 屬性傳遞值給父組件，然後父組件可以根據不同需求改變這個slot內部的顯示結構
把子組件的值，傳給父組件固定的區域進行操作
2. 前端多系統集成通信
集成多個相互獨立的系統展示在一孫碰握個頁面上，多個系統可以相互進行數據通信。
一般會存在3種信息傳遞場景：
1： 父——>子 由父系統把消息傳遞到子系統
2： 子1——>父——>子2 🈶子1把消息傳遞給子2，但是需要父系統作為代理中轉
3： 子——> 父 由子系統把消息傳遞給父系統
在此不再詳細贅述此技術，可通過相關書籍（推薦《JavaScript高級程序設計》）和博客自行學習。
注意: 前端框架使用vue
步驟：
2： 父系統觸發事件，例如click事件，通吵讓過id獲取子系統的window，然後發送消息，例如觸發的事件名為： postMessage
3： 子系統接收數據
以app1為例：
在vue中，可以寫在mounted鉤子函數中；
在原生js中，可以寫在 window.onload = function () {} 中，頁面渲染的時則慶候進行接收消息事件注冊
頁面展示效果：
以app1為例
app1系統觸發事件，例如click事件，直接獲取parent對象（父系統window），通過parent發送消息，例如觸發的事件名為： postMessage
然後需要在父系統里注冊message事件,來監測從app1傳來的消息
頁面展示效果：
解決辦法是需要通過父系統作為代理來進行傳遞數據，我們從app1 將數據通過父系統傳遞給app2
首先在app2觸發消息傳遞
父系統接收數據，做轉發的准備
app2注冊message事件，來接收從app來的消息
頁面展示效果如下：