全局事件总线(GlocalEventBus)
1.一种组件间通信的方式,适用于任意组件间通信
2.安装全局事件总线:
new Vue({
...
beforeCreate(){
Vue.prototype.$bus=this //安装全局事件总线,$bus就是当前应用的vm
},
...
})
3.使用全局总线:
3.1 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods:{
demo(msg){
console.log(msg)
}
},
mounted(){
this.$bus.$on('事件名',this.demo)
}
3.2提供数据:
this.$bus.$emit('事件名',数据)
4.最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
main.js
import Vue from 'vue'
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
// 安装全局事件总线
beforeCreate() {
// $bus相当于一个事件中心
Vue.prototype.$bus = this
}
}).$mount('#app')
Student.vue
<template>
<div class="styl">
<p>学生姓名:{{ name }}</p>
<p>学生年龄:{{ age }}</p>
<p>学生性别:{{ sex }}</p>
<button @click="sendName">发送学生姓名给学校</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "张三",
age: 22,
sex: "男",
};
},
methods: {
sendName() {
// 发送数据
// 通过$emit触发send事件,发送this.name数据
this.$bus.$emit("send", this.name);
},
},
};
</script>
<style>
.styl {
background: darkcyan;
padding: 5px;
}
</style>
School.vue
<template>
<div class="styl">
<p>学校姓名:{{ name }}</p>
<p class="col">学校地址:{{ address }}</p>
<p>学生:{{ msg }}</p>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "某某某学院",
address: "南宁市",
msg: "",
};
},
methods: {
//getMsg回调函数 接收Student组件传过来的数据
getMsg(data) {
this.msg = data;
},
},
//挂载期: 自动接收
mounted() {
// 绑定自定义事件send,getMsg作为回调函数接收数据
this.$bus.$on("send", this.getMsg);
},
};
</script>
<style lang='less' scoped>
/* scoped:当前样式只在当前页面有效 */
.styl {
background: darkgoldenrod;
padding: 5px;
.col {
font-size: 26px;
color: rebeccapurple;
}
}
</style>
消息订阅与发布(pubsub)
插件:pubsub-js(pub:publish,sub:subscribe)
1.一种组件间通信的方式,适用于任意组件间通信
2.使用步骤:
2.1安装pubsub:npm i pubsub-js
2.2引入:import pubsub from “pubsub-js”;
2.3接收数据:A组件要接收数据,则在A组件中订阅消息,订阅的回调函数留在A组件中
methods(){
demo(data){.....}
}
....
mounted(){
//订阅消息
this.pid=pubsub.subscribe('xxxx',this.demo)
}
2.4提供数据(发布消息):pubsub.publish(‘xxxx’,数据)
2.5最好在beforeDestroy钩子中,用**pubsub.unsubscribe(this.pubId)**去取消订阅
Student.vue
<template>
<div class="styl">
<p>学生姓名:{{ name }}</p>
<p>学生年龄:{{ age }}</p>
<p>学生性别:{{ sex }}</p>
<button @click="sendName">发送学生姓名给学校</button>
</div>
</template>
<script>
// 订阅和发布相关插件
import pubsub from "pubsub-js";
export default {
name: "Student",
data() {
return {
name: "张三",
age: 22,
sex: "男",
};
},
methods: {
sendName() {
// 发送数据
// 通过$emit触发send事件,发送this.name数据
// this.$bus.$emit("send", this.name);
// 发布消息,并传递数据
pubsub.publish("send", this.name);
},
},
};
</script>
<style>
.styl {
background: darkcyan;
padding: 5px;
}
</style>
School.vue
<template>
<div class="styl">
<p>学校姓名:{{ name }}</p>
<p class="col">学校地址:{{ address }}</p>
<p>学生:{{ msg }}</p>
</div>
</template>
<script>
// 订阅与发布相关插件
import pubsub from "pubsub-js";
export default {
name: "School",
data() {
return {
name: "某某某学院",
address: "南宁市",
msg: "",
pubId: 0,
};
},
methods: {
//getMsg回调函数 接收Student组件传过来的数据
/* getMsg(data) {
this.msg = data;
}, */
getMsg(msgName, data) {
this.msg = data;
},
},
//挂载期: 自动接收
mounted() {
// 绑定自定义事件send,getMsg作为回调函数接收数据
// this.$bus.$on("send", this.getMsg);
// 接收数据方
// 订阅消息
// 方式一
// 每一次订阅都会生成一个订阅id,标识符,类似定时器
// msgName是消息名(send),data是订阅到的发布的数据
/* this.pubId = pubsub.subscribe("send", (msgName, data) => {
// 如果回调函数是普通函数,会报错Uncaught TypeError: Cannot set property 'msg' of undefined,所以要使用箭头函数
// 因为这是在pubsub第三方库里面,this为Null
this.msg = data;
}); */
// 方式二
this.pubId = pubsub.subscribe("send", this.getMsg);
},
beforeDestroy() {
// 解绑
// this.$bus.$off('send')
// 通过对应的标识符去取消订阅
pubsub.unsubscribe(this.pubId);
},
};
</script>
<style lang='less' scoped>
/* scoped:当前样式只在当前页面有效 */
.styl {
background: darkgoldenrod;
padding: 5px;
.col {
font-size: 26px;
color: rebeccapurple;
}
}
</style>