组件化原理探索(父子组件通信)------------引用

我们考察child组件,发现它跟一般的组件有以下两点不同:

  • 多了一个events字段,里面定义了许多事件及其对应的回调方法。

  • methods方法中调用了$dispatch和$broadcast,用来触发及传播事件。

事件初始化

 

我们需要将事件及其回调函数注册到child实例上,这样当其他组件(无论是父组件还是子组件)传来消息的时候,程序才能知道该触发哪个事件,该执行哪个回调函数。

 

 

 

 

 

 

触发及传播事件

 

无论是$dispatch还是$broadcast,他们都有类似的步骤。

如果是向上冒泡事件

  • 在当前组件实例触发($emit)事件,执行对应的回调函数。如果事件return true,那么代表事件可传播,执行第2步。如果事件不可传播,结束。

  • 找出当前组件的父组件。没有父组件?结束。有父组件?把父组件当成当前组件,重新执行第1步。

 

如果是向下广播事件

  • 找出当前组件的所有子组件。没有子组件?结束。有子组件?执行第2步。

  • 深度遍历所有子组件,把子组件当成当前组件,触发($emit)事件,执行对应的回调函数。如果事件return true,那么代表事件可传播,重新执行第1步。如果事件不可传播,结束。

相关代码如下:

 

 

注意:Vue在广播事件的时候,是不会在发起广播事件的组件触发该事件的,只会从它的下一个子组件开始触发。这与冒泡事件稍有不同。

 

That's all。这样我们就实现了Vue父子组件之间的通信了。参考的Vue源码依然是1.0.26版本,实现的完整代码在这儿。

后话

 

虽然我们实现了父子组件通信,但是,兄弟节点A、B间怎么通信呢?一个比较粗糙的思路就是:兄弟A将消息发到兄弟A、B共同的父节点C,然后再经由C转发给兄弟B。但是这样做有一个弊端,当节点很多的时候,这种传递方式就会显得杂乱无章。那么,传统的计算机是如何解决众多兄弟节点(比如,CPU、内存、硬盘等等)之间的通信的呢?答案是总线机制。这么良好的思想,我们前端怎么能不借鉴呢?所以就有了redux和vuex这些状态管理器。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2019-11-11 10:22  又回到了起点  阅读(277)  评论(0编辑  收藏  举报