VUe兄弟通信

Posted 2020-10-31 哓番茄

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUe兄弟通信相关的知识，希望对你有一定的参考价值。

用过Vue，你肯定知道，Vue组件之间的通信常见的有
$dispatch - 通过冒泡的方式传递事件
$broadcast - 通过广播的方式向子孙组件传递事件

如果组件之间的关系只是父-子关系，那么dispatch,broadcast其实就足够了。
但是有天需求变了。登录成功之后，要把用户信息都填上，而需要用户信息的组件不是父组件，而是兄弟组件的后台。
那么事件传递就会变成登录组件向上dispatch到父组件，父组件通过broadcast的方式下发。

example

当然，这个简单的例子不足够证明这样的传递有多糟糕。随着项目和项目成员的壮大，这样的组件通信越多，越不好维护。
所以官方推出了Vuex。

vuex

Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。
然而，有时候我们的项目并没有复杂到需要用上Vuex。

这时候你可以考虑使用Event Bus。

Vue实际上在1.几版本的时候就加入了Event Bus，但是好像官方文档中没怎么提到。
作者应该是在Vue的原型对象上注入了，所以只要创建一个Vue对象就够了。

// bus.js
export default new Vue();

使用$on全局监听（好像这样说不是很正确）

import Bus from ‘../bus.js‘;

export default {
  ready() {
    Bus.$on(‘loadSuccess‘, text => {
      this.show = true;
      this.status = ‘loadSuccess‘
      if (text) {
        this.text = text;
      }
    })
  },
}

使用$emit触发事件。

ajax({
  url: Config.API_ADDRESS_ADD,
  type: ‘post‘,
  dataType: ‘json‘,
  data: data
}).then((data)=>{
    Bus.$emit(‘loadSuccess‘, ‘添加成功！‘);
}).catch((data)=> {
})

使用$once注册一次，触发之后即被销毁。
使用$off解绑事件。

就这么简单。Event Bus非常简单好用，但也有存在隐患，需要注意：

保持良好的团队命名规范，避免冲突，因为所有事件代码都保留在各个组件内部，发生冲突很难 debug。
尽量减少不必要的通信，合理使用props传参。
大型项目，应该一开始就选用vuex

以上是关于VUe兄弟通信的主要内容，如果未能解决你的问题，请参考以下文章