VUe兄弟通信

Posted 哓番茄

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对象就够了。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
import Bus from ‘../bus.js‘;

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

使用$emit触发事件。

1
2
3
4
5
6
7
8
9
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兄弟通信的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 父子组件通信 兄弟组件通信

vue2.0 父子组件通信 兄弟组件通信

Vue兄弟组件通信

vue 兄弟组件相互通信

Vue 兄弟组件通信(不使用Vuex)

VUe兄弟通信