7体系化Vue再学习——全局事件总线及消息订阅

vm/vc 的区别

参考：

三十.什么是vm和vc？_这不比博人传燃？的博客-CSDN博客_vm和vc

1、什么是vm？什么是vc？

VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

2、VueComponent组件的本质是什么？

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。我们只需要写或Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

全局事件总线

 在vue中我们有多组件进行数据交互，我们希望能有一个对象能够掌控全局，成为多子组件的通信使者。

对于这个需求，则组件一定是需要:

1、是vue对象，因为需要触发自定义事件（只有vue对象的原型持有$on、$emit）

2、其次需要各子组件都能持有该对象。

则全局Vue成了不二之选。

 定义Vue属性中的bus，并持有自己这个对象，则bus可以调用vue原型中的内容。

 在A组件中定义事件，在B组件中触发事件

销毁：

在定义事件的组件内，一定要在销毁的同时，把自定义的事件一起销毁

根据全局事件总线来改写我们的todolist案例

之前我们是将父组件需要调用的方法封装之后通过props一层一层传递给需要传数据的子组件，有了全局事件总线之后，我们就可以通过全局时间总线传递方法过去了

 则在调用的组件中，我们调用对应的方法

 

消息订阅与发布

通过pubsub-js库实现；

订阅消息

发布消息

$nextTick()

在inpute中，我们希望在v-show变化之后，立马能够获取焦点。

 对此我们希望通过ref直接对对象进行修改，但是实际情况是：我们并没有获取到焦点。

因为：vue重新刷新DOM，并不是立马去解析DOM，

我们曲线救国的方案是加入延迟：

 官方给定的方案为：

 通过this.$nextTick()在下一次DOM进行重新加载时进行执行。