(尚硅谷)Vue笔记---------17

全局事件总线1

它可以完成任意组件之间的通信。

原理图:

 

 

 

 

现在我们使用事件总线的方式去把各个组件之间实现通信：

在main中如果使用windos对象去传递信息，肯定是所有组件都可以收的到的：

 

 

在两个组件分别去使用钩子函数去接收window给我们的东西，我们就能接收的到。

我们原理图中的x就是要所有人都能看的到.

但是既然我们使用了框架，我们就不会去使用window对象了。

我们可能会想到vc的原型对象Vuecomponent，因为所有的vc都是它new出来的。

那我们去试试去：

但是用这种方法是报错的，我们的VueComponent不是程序员写出来的，是extend方法创建的。

我们可以去用vue的原型对象：

 

 

 

这样我们就把原理图中的x做出来了，所有的组件都可以看到它，并且获取它的值。

全局事件总线2 

然后要想完成事件总线，x还需要满足可以调用$on,$off,$emit

我们之前的写法把x作为对象类型给vue原型对象，就找不到这些方法了，我们应该把x写成什么呢？

我们把x写成一个自定义的组件。

 

 

 

 这样就可以实现同级子组件之间的信息传递。

但是这么写我们还要这样去创建一个vc对象，很麻烦。我们换一种写法：

我们可以把x就变成当前的vue，通过钩子函数在vue创建成功之前去做。

我们还可以做全局的事件总线：

我们的vue中的事件总线叫$bus:

 

 记得我们在销毁之前要去给我们的事件总线进行解绑处理：

总结:

消息订阅与发布_pubsub 

我们使用消息订阅与发布可以做到之前我们用事件总线能做的同样的需求：

我们在上个代码的基础上去掉事件总线的代码。

然后首先要去下载pubsub的东西：

npm i pubsub-js

安装好之后，我们哪个组件需要去接收，就在哪个组件上去写：

学生组件去发布信息。

 

学校组件去接收发布的信息，并且返回id值用于销毁前去除。

 

由于我们的pubsub是外部引入的，返回的this是空，当我们使用箭头函数时，返回值就为VC了。

 

也可以直接写this.pubId=pubsub.subscribe('hello',this.demo )，然后在methods中定义demo方法参数是this来做。

 

总结：