zoukankan      html  css  js  c++  java
  • 16 消息的订阅--发布机制

    使用①:改变上一个 github user 的 组件通信方式

    在上面一篇 search github users 中,Search 组件和 List 组件 的通信 是通过 props 完成的,且中间需要父组件APP 的参与,

    下面 我们使用消息的 发布 --- 订阅 机制 ,以这种模式 实现 Search 组件和 List 兄弟组件之间的通信。

    使用 Pub / Sub 之前,我们需要安装这个库,npm install --save pubsub-js

    然后在需要使用到这个的组件中 引入  import PubSub from   ' pubsub-js ' 才能使用

    首先,Search 按钮点击后,我们拿到了输入框中用户数据的值,Search 组件 就需要发布消息(即发布用户输入的这个值),

    然后,List 组件 订阅消息,注意是初始化的时候就会订阅消息

    这样就成功 使用 发布--订阅 机制 实现了 组件 之间的通信

    使用②:前面还有一个评论管理的案例中,Item 组件 中点击删除按钮时 调用 父组件 传过来的 删除事件,实现删除,而 父组件 传递给子组件的 delData 方法 是通过 props 方法传递,所以必须经过 List 组件。

    下面我们使用 消息的 发布---订阅 机制 不通过 List 组件,直接让父组件APP  和 Item 组件实现通信(传递 delData 方法)

    首先,Item 组件中,点击删除按钮后,发布消息

    接着,APP 组件中,初始化时就订阅消息

    这样,我们就实现了 APP 和 Item 之间的直接通信

    中间,我犯了一个错误,因为 Item 发布消息时我们需要发布这个Item 的索引,而Item的索引来源于 List 的 map 结构中,因此我直接用 Map 中的 key 作为 索引让Item接收并在发布消息时发布,

    而这时,控制台报错信息时:The ' key '  is not a prop ,说明 不能直接用 key 作为属性传递,因而 在 List 传递 索引给 Item 中,我重新定义了一个属性 index,传递给 Item,Item接收后发布出去即可。

  • 相关阅读:
    oracle 12c迁移数据及遇到的问题
    用最有效率的方法计算 2 乘以 8?
    Java 中的方法覆盖(Overriding)和方法重载(Overloading)是什么意思?
    是否可以在 static 环境中访问非 static 变量?
    什么是值传递和引用传递?
    Java 支持的数据类型有哪些?
    JDK、JRE、JVM 分别是什么关系?
    idea设置方法注释
    Java中&和&&的区别
    int和Integer有什么区别?
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12503786.html
Copyright © 2011-2022 走看看