「后端小伙伴来学前端了」Vue中利用全局事件总线改造 TodoList 案例

前言

上上篇写了：Vue中利用Props实现TodoList案例

上篇写了：Vue中全局事件总线的概念及基本使用

这篇就打算用全局事件总线来改造一下之前写的TodoList案例，一天学习一点，我们一起进步冲。

一、案例效果

需要实现的东西，和之前是一样的，只是我们换成用全局事件总线来进行组件之间的通信。

二、分析为什么要换成全局事件总线

为什么需要换成全局事件总线勒？我们拿Props也能够实现这些功能啊，可以是可以实现，但是我们看看之前有哪些问题的存在。

我们之前在App组件中套入了一个List组件，然后在List组件套了一个Item组件，数据定义在App组件，就意味着我们要实现祖孙组件之间通信。

props实现如下：

一直传递到Item组件中才使用

作为咱们程序员来说，在一个组件中，写了但是又完全没有使用的东西，就是多余的哈。

不过尤雨溪大佬已经替我们懒完了，就有了这些全局事件总线啊，还有Vuex这种生态，来方便我们进行组件通信。

使用全局事件总线就可以解决这个问题，更方便实现祖孙组件之间通信。

三、全局事件总线实现TodoList

我们着重于实现app组件和Item组件之间的通信，也就是祖孙组件之间的通信哈。

另外兄弟组件也是一样的实现方法哈，实现起来，再也不用像props那样多层传递了，也不用再借助中间层拉，直接绑定即可以通信拉。

祖孙组件之间通信

App组件：

List组件：

MyTodoItem组件

这样就省去了MyList组件去做中间层。另外代码及结构也会显得更加的清晰。

兄弟组件之间通信

现在我们的需求是需要在Footer组件中点击修改按钮，然后能够做到修改List组件下的Item组件的值(宁在春的这个值)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yAte2u8c-1637166284627)(C:\Users\ASUS\Desktop\宁在春的学习笔记\前端系列\前端学习笔记\09Vue中利用全局总线实现TodoList案例.assets\image-20211118001654427.png)]

item组件

实现效果

四、源码

gitee

github

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感谢。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望：我们，待别日相见时，都已有所成。