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来的消息
页面展示效果如下：