全局事件总线
在写组件的时候，我们都知道父传递子
也知道子传递给父
但是组件间嵌套复杂的时候我们应该怎么通信呢?
有的小伙伴会说适用vuex，的确是可以解决问题的
下面我们说一下全局事件总线
一种组件间通信的方式，适用于任意的组件间通信。
场景描述
a-test组件向b-test传递数据.
我们就需要使用全局事件总线。
全局事件总线非常简单
通过this.$bus.$emit('事件名',数据)进行提供数据
通过this.$bus.$on('事件名',(data)=>{ })接受数据
通过接受数据方的组件中销毁对应的事件
beforeDestroy() {
this.$bus.$off('hello')
},
全局事件总线第一步: main.js中注入
// demo就是 vueComponent
// 因为 Vue.extend({})的返回值就是 vueComponent
let Demo = Vue.extend({})
// d就是vueComponent的实例对象哈
let d = new Demo();
Vue.prototype.x=d
我们需要有一个副本或者说傀儡来进行存放[通知]
我们将它放在vueComponent这个实例上
感觉这样写有点麻烦，后面我们想办法优化一下
第二步: a-test发送数据
<template>
<div class="flexflex">
<el-button @click="gievHander">将数据传递给b-test组件</el-button>
<h2 >我是a-test组件</h2>
</div>
</template>
<script>
export default {
methods:{
gievHander(){
this.x.$emit('hello',666)
}
},
}
</script>
第三步:b-test组件接受数据
<template>
<div class="btest">
<h2>我是b-test组件</h2>
<div>传递过来的数据 {{ getDaoData }}</div>
</div>
</template>
<script>
export default {
data(){
return {
getDaoData:''
}
},
mounted(){
this.x.$on('hello',(data)=>{
// hello是监听的事件名称，
console.log('监听的事件数据',data )
this.getDaoData=data
})
},
}
</script>
将第一步进行优化
虽然上面这样的写法虽然是可以的。
但是不够简洁。我们需要将main.js优化一下
new Vue({
router,
render: (h) => h(App),
<!-- 添加下面这四行行代码 -->
beforeCreate() {
// 生命周期中的this指向的是vue实例
//安装全局事件总线；x最好改为$bus
Vue.prototype.x=this
}
}).$mount("#app");
第三步：持续优化
当这个组件销毁的时候，我们应该将事件销毁
<template>
<div class="btest">
<h2>我是b-test组件</h2>
<div>传递过来的数据 {{ getDaoData }}</div>
</div>
</template>
<script>
export default {
data(){
return {
getDaoData:''
}
},
mounted(){
this.x.$on('hello',(data)=>{
// hello是监听的事件名称，
console.log('监听的事件数据',data )
this.getDaoData=data
})
},
beforeDestroy() {
//组件销毁的时候，销毁对应的事件
this.x.$off('hello')
//注意 this.x.$off()表示销毁事件总线的所有事件
},
}
</script>
消息订阅与发布
有的同学可能会问，处了使用刚刚提供的哪一种，还有其他方法吗？
还真的有，只不过需要依赖第三方库！
cnpm i pubsub-js 需要安装一下这个库
安装后，需要引入一下。
订阅: pubsub.publish(消息名,数据)
接受：pubsub.subscribe(消息名,(msgName,data)=>{})
销毁: pubsub.unsubscribe('xx')
a-test发送数据
<template>
<div class="flexflex">
<el-button @click="gievHander">将数据传递给b-test组件</el-button>
<h2 >我是a-test组件</h2>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
methods:{
gievHander(){
pubsub.publish('dingyueming','发布消息啦')
}
},
}
</script>
b-test接受数据
<template>
<div class="btest">
<h2>我是b-test组件</h2>
<div>传递过来的数据=> {{ getDaoData }}</div>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
data(){
return {
getDaoData:'',
pubId:''
}
},
mounted(){
this.pubId=pubsub.subscribe('dingyueming',(msgName,data)=>{
// 第一个参数是订阅的名称 msgName
// 第二个参数是数据
this.getDaoData=data
})
},
// 组件销毁的时候，取消订阅
beforeDestroy() {
pubsub.unsubscribe(this.pubId)
},
}
</script>
