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