方式一：bus中央总线
利用总线方式可以平级组件进行通信
无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。
第一步：我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下
import Vue from 'vue'
export default new Vue();
eventBus.js中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。
第二步：创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件
firstChild.vue
<template>
<div class="firstChild">
<h2>子1</h2>
<button @click="sendMsg">向兄弟2中传值</button>
</div>
</template>
<script>
import bus from './bus';//引入中央总线Vue实例
export default {
data() {
return {
msg: '向兄弟2中传值'
}
},
methods: {
sendMsg() {
/**
* $emit()触发事件并传值
*/
bus.$emit('userDefindEvent', this.msg)
}
}
}
</script>
我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数
PS:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。
第三步：我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值
secondChild.vue
<template>
<div class="secondChild">
<h2>子2</h2>
<p>从firstChild接收的字符串参数：{{msg}}</p>
</div>
</template>
<script>
import bus from './bus';
export default {
data() {
return {
msg: '默认值'
}
},
mounted() {
let _this = this
//定义监听事件
bus.$on('userDefindEvent',function(msg) {
_this.msg = msg
})
}
}
</script>
我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数
PS:
mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。
$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。
第四步：创建一个parent父组件，在父组件中，注册这两个组件，并添加这两个组件的标签
parent.vue
<template>
<div class="parent">
<h1>中央总线通信</h1>
<first-child></first-child>
<second-child></second-child>
</div>
</template>
<script>
import firstChild from './firstChild';
import secondChild from './secondChild'
export default {
data() {
return {
}
},
components: {
firstChild,secondChild
}
}
</script>
总结：
- 创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁
- 在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
- 在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数
方式二：消息订阅与发布(PubSubJS 库)
pubsub的优点：组件之间的通信没有任何位置的限制
首先安装pubsub-js库
npm install pubsub-js --sava
pubsub有两个方法：
PubSub.publish('发布的消息名','提供给订阅者的参数') //发布消息 ==>触发事件 比如点击事件
举例：PubSub.subscribe('infomation_1',data)
PubSub.subscribe('发布的消息名',事件的监听函数) //订阅消息 ==>绑定事件监听 获取消息
举例：PubSub.subscribe('infomation_1',function(msg,data){
})
案例：
父组件parent.vue
<template>
<div class="parent">
<h1>消息订阅与发布PubSub</h1>
<first-child></first-child>
<second-child></second-child>
</div>
</template>
<script>
import firstChild from './firstChild'
import secondChild from './secondChild'
export default {
data() {
return {
}
},
components: {
firstChild,secondChild
}
}
</script>
子组件firstChild.vue ---发布消息
<template>
<div class="firshChild">
<h2>子1</h2>
<button @click="sendMsg">向secondChild中传值</button>
</div>
</template>
<script>
// 引入pubsub-js插件
import PubSub from 'pubsub-js'
export default {
data() {
return {
msg: 'muzidigbig'
}
},
methods: {
sendMsg() {
PubSub.publish('userEvent',this.msg); //发布消息
}
}
}
</script>
子组件secondChild.vue ---订阅消息
<template>
<div class="secondChild">
<h2>子2</h2>
<p>firshChild传过来的数据：{{msgg}}</p>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
data() {
return {
msgg: ''
}
},
mounted() {
// 订阅消息
PubSub.subscribe('userEvent',(msg,data) => {
this.msgg = data
})
}
}
</script>
注意
1) 优点: 此方式可实现任意关系组件间通信(数据)
