• 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接收后发布出去即可。

  • 相关阅读:
    机器学习项目流程
    机器学习之数据归一化问题
    python三数之和
    从不订购的客户
    case when then的用法-leetcode交换工资
    .NET Core Api 集成 swagger
    .NET CORE 2.1 导出excel文件的两种方法
    Dapper的基本使用
    (转)深入研究MiniMVC之后续篇
    (转)深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12503786.html
Copyright © 2020-2023  润新知