一次踩坑经历看vue几个组件通讯的适用场景

一次业务中Vue组件通讯的踩坑记录

踩坑场景

须要的效果是移动端的一个编辑我的信息的页面。点击姓名一栏，跳转到另外一个页面去编辑姓名。

其中，设计到的通讯时有2个方面

• 点击姓名时，携带name跳转到【姓名编辑页】，并显示到input上
• 用户走编辑接口时，须要跳转回以前的页面，而且把修改后的name携带回来。

那么如何作呢，我把这两个vue组件，很草率的设计成【不一样路由】的组件了。计划用eventBus或者vuex通讯。

因为缺少认知，没有真正的理解eventBus和路由传参、vuex各自的适用场景，因此才形成了草率的设计，

实际上，这里的组件关系设计是不合理的，应该设计成父子关系。由于从逻辑上他们也是父子关系，也方便通讯。

选择用eventBus来作的“瑕疵”

我使用eventBus后，基本上能够通讯了，但有点“瑕疵”

在用户点击姓名一栏时，我跳转路由，而且$emit触发事件

在编辑页面，我在mouted里$on监听事件

这样的致使的Bug是，第一次进入编辑页时，没法监听到事件，数据也没法被传递到编辑页面

缘由是，第一次emit时，编辑组件还不存在，还没监听你就触发，天然是触发不了事件的。

那么，这算不算eventBus的缺陷呢？

我以为这是因为我对eventBus的理解不够。

我觉得eventBus是专门处理兄弟组件之间通讯的，可是实际上，eventBus是专门处理 [同一个路由下] 的复杂组件之间通讯的。

若是涉及夸路由的组件通讯。能够考虑利用$route对象传参或者Vuex

在上面例子中，跨路由的组件通讯，使用eventBus可能出现我emit，可是另外一个组件还不存在，也没有监听。

致使第一次的数据传递失败.

选择监听$route的变化

这也是一个不错的方法

点击phone时，我click事件里，跳转路由，而且传递params参数

在另一个页面，我经过this.$route

.params.phone赋值给phone

选择用vuex作

Vuex来作的话也能够，可是其实不太合适

在点击name时，我跳转路由，而且提交commit来修改state

在编辑name的页面，选择用this.$store.state.name绑定到Input上，用@input事件监听变化，变化后提交commit

回到最初，设计成父子组件的关系。

若是上天在给我一次机会，我以为必定要把它们设计成父子关系。

最后总结一下Vue通讯的几个方式，和各自的适用场景

• 父子组件通讯: 父子关系
• eventBus通讯 : 同一个路由下，复杂组件的通讯。
• Vuex: 全局的、跨越路由、非父子组件的通讯均可以用它关系
• 利用$route的params或者query: 跨路由的能够用，但同一个路由下就不适合用了。
• localStorage / cookie / sessionStorage: 全局能够用，可是存储到本地
• 甚至利用Vue实例上添加值 （不建议）