zoukankan      html  css  js  c++  java
  • 组件化原理探索(父子组件通信)------------引用

    我们考察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这些状态管理器。

  • 相关阅读:
    IIS7中启用JS的压缩
    .NET中使用WINDOWS API参数定义
    IE6下的JQUERY_FCK兼容问题
    移动native+HTML5混搭应用感受
    【翻译】Fixie.js——自动填充内容的插件
    JSON辅助格式化
    【记录】导致notifyDataSetChanged无效的一个错误
    【Perl】批量word和PPT文档转pdf
    【记录】有关parseInt的讨论
    手机滑动应用
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/11833281.html
Copyright © 2011-2022 走看看